jQuery-w3school（2020.2.16）【六、jQuery ajax】

本文链接：https://blog.csdn.net/mus123/article/details/104349893

这篇博客详细介绍了jQuery中的AJAX操作，包括load()方法用于简单快速地加载HTML内容，GET和POST请求的使用场景和区别。文中通过实例展示了如何使用$.get()和$.post()进行数据交互，并强调了不同方法在处理敏感数据和缓存方面的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

六、jQuery ajax
（一）jQuery ajax简介
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
（二）jQuery laod()加载
1.jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

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

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
2.也可以把 jQuery 选择器添加到 URL 参数。下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的 <div> 元素中：

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

这是示例文件（“demo_test.txt”）的内容：

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

3.可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
·responseTxt - 包含调用成功时的结果内容
·statusTXT - 包含调用的状态
·xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
$("#div1").load("/example/jquery/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        document.body.innerHTML+="</br></br>外部内容加载成功！"+xhr.status+": "+xhr.statusText;
//外部内容加载成功！200: OK
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div><button>获得外部内容</button>
</body>
</html>

（三）jQuery get和post

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
• GET - 从指定的资源请求数据。GET 基本上用于从服务器获得（取回）数据。
·GET 请求可被缓存
·GET 请求保留在浏览器历史记录中
·GET 请求可被收藏为书签
·GET 请求不应在处理敏感数据时使用
·GET 请求有长度限制
·GET 请求只应当用于取回数据
/test/demo_form.asp?name1=value1&name2=value2
• POST - 向指定的资源提交要处理的数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
·POST 请求不会被缓存
·POST 请求不会保留在浏览器历史记录中
·POST 不能被收藏为书签
·POST 请求对数据长度没有要求
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.get() 的第一个参数是我们希望请求的 URL（“demo_test.asp”）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
“demo_test.asp”

<%
response.write("This is some text from an external ASP file.")
%>

3.$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.asp”)。
然后我们连同请求（name 和 city）一起发送数据。
“demo_test_post.asp” 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
“demo_test_post.asp”

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>

jQuery Ajax函数	描述
jQuery.ajax()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。