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

梦里梦外; 2021-08-31 00:27 326阅读 0赞

# 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();
        });
    });

**执行结果：**

![20200730164505450.jpg][]

# 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>

**执行结果：**

![20200730171637347.png][]

[20200730164505450.jpg]: /images/20210724/bda4ec7479314e008a92dda44bd191f9.png
[20200730171637347.png]: /images/20210724/fb9628cc183243e3aa088fc791d31e14.png