JQuery中的Ajax

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

示例代码：

<h2>jQuery and AJAX</h2>
<p id="p1">This is some text in a test.</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的

元素中：

示例

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 文件中 id=“p1” 的元素的内容，加载到指定的

元素中：

实例

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

实例

$("button").click(function(){
  $("#div1").load("demo.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET 与 POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,[data],callback,[type]);

必需的 URL 参数规定您希望请求的 URL。

data就是发送给服务器端的key/value形式的数据内容

可选的 callback 参数是请求成功后所执行的函数名。

type：设置返回数据内容的格式，值可以为XML，HTML，script，json，text，_default

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

实例

   <button>点击</button>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        $('button').click(function () {
            /*
                    get(url,data,callback,type)方法 - 请求方式为GET
                    * 参数
                        * url - 异步请求的地址
                        * data - 异步请求的数据
                        * callback - 异步请求成功后的回调函数
                            function(response){}
                        * type - 设置服务器端响应结果的格式
                            xml、html、script、json、txt等
            * */
            $.get('../data/server2.json',{name:'Deity'},function (response) {
                console.log(response)
            },'text')

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：

$.post(URL,[data],callback,[type]);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

实例

   <button>点击</button>
    <script src="../jquery-3.5.1.js"></script>
    <script>
        $('button').click(function () {
            /*
                    get(url,data,callback,type)方法 - 请求方式为GET
                    * 参数
                        * url - 异步请求的地址
                        * data - 异步请求的数据
                        * callback - 异步请求成功后的回调函数
                            function(response){}
                        * type - 设置服务器端响应结果的格式
                            xml、html、script、json、txt等
            * */
            $.post('../data/server2.json',{name:'Deity'},function (response) {
                console.log(response)
            },'text')

jQuery 中的getScript与getJSON方法

getScript()

通过 AJAX 请求来获得并运行一个 JavaScript 文件：

语法

jQuery.getScript(url,success(response,status))

示例代码

<button>🔘</button>
<script src="../jquery-3.5.1.js"></script>
<script>
    $('button').click(function () {
        // 动态加载JavaScript文件，并且执行
        $.getScript('../data/server3.js',function (data) {
            console.log('请求成功了。。。')
            console.log(data) //返回的是js代码的字符串格式
            eval(data);// 返回js代码输出的内容的字符串格式
        })
    })
</script>

getJSON()

定义和用法

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

语法

jQuery.getJSON(url,data,success(data,status,xhr))

示例

<button>🔘</button>
<script src="../jquery-3.5.1.js"></script>
<script>
    $('button').click(function(){
        // getJSON()方法的请求方式为GET
        $.getJSON('../data/server2.json',function(data){
            console.log(data)
        })
    })
</script>