博客

JQuery中的$.getScript()和$.getJSON()方法的使用

  • Post author:
  • Post category:其他


1、$.getScript()方法的使用

有时候，在页面初次加载时就取得所需的全部 JavaScript 文件是完全没有必要的。虽然可以在需要哪个 JavaScript 文件时，动态地创建<script>标签，JQuery代码如下： 

$(document.createElement("script")).attr("src","/js/test.js").appendTo("head");

或者： 

$("<script type='text/javascript' src='/js/test.js' />").appendTo("head");

但是这种方式并不理想。为此，JQuery 提供了 $.getScript() 方法来直接加载.js文件，与加载一个HTML片段一样简单方便，并且不需要对 JavaScript 文件进行处理，JavaScript 文件会自动执行。JQuery代码如下： 

$.getScript("/js/test.js",function(){
    //回调函数（非必须）
});


【示例】

使用JQuery的$.getScript()方法加载.js文件，并执行.js文件中的方法。

（1）在js目录下，创建名为 test.js 的脚本文件，并编写执行方法。 

//获取用户名称
function getUserName()
{
    alert("您好，欢迎访问 pan_junbiao的博客");
}

（2）使用JQuery的$.getScript()方法加载 test.js 文件，并使用回调函数调用脚本的执行方法。 

$(document).ready(function() {
    $.getScript("/js/test.js",function(){
        getUserName();
    });
});


执行结果：

2、$.getJSON()方法的使用

$.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同。

JQuery代码如下： 

$.getJSON(url, function(data){
    //回调函数
});


【示例】

使用JQuery的$.getJSON()方法调用后台方法获取用户列表，并遍历用户列表。

（1）创建用户信息控制器（Controller），并编写获取用户列表方法。 

/**
 * 用户信息控制器
 * @author pan_junbiao
 **/
@Controller
@RequestMapping("user")
public class UserController
{
    /**
     * 获取用户列表
     */
    @ResponseBody
    @RequestMapping("getUserList")
    public List<UserInfo> getUserList()
    {
        //创建用户列表
        List<UserInfo> userInfoList = new ArrayList<>();
        userInfoList.add(new UserInfo(1, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(2, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(3, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        userInfoList.add(new UserInfo(4, "pan_junbiao的博客", "https://blog.csdn.net/pan_junbiao"));
        userInfoList.add(new UserInfo(5, "pan_junbiao的博客", "您好，欢迎访问 pan_junbiao的博客"));
        //返回结果
        return userInfoList;
    }
}

（2）创建显示页面（View），显示用户列表信息。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中的$.getJSON()方法的使用</title>
    <meta name="author" content="pan_junbiao的博客">
</head>
<body>
<input type="button" value="获取用户信息" id="btnGetUser"/>
<div id="content" style="margin-top: 10px;"></div>
</body>
<script src="/js/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function() {
        $("#btnGetUser").click(function(){
            $.getJSON("/user/getUserList", function(data){
                $("#content").empty();
 
                var html = "";
 
                //使用$.each()函数，遍历数据
                $.each(data,function(index,item)
                {
                    html += " 索引：" + index;
                    html += " 用户编号：" + item.userId;
                    html += " 用户名称：" + item.userName;
                    html += " 博客信息：" + item.remark;
                    html += "<br>";
                });
 
                $("#content").html(html);
            });
        });
    });
</script>
</html>


执行结果：


版权声明：本文为pan_junbiao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。