jQuery - AJAX 简介
1.AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
语法:
$(selector).load(url,data,function(response,status,xhr))
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
---|---|
url | 必需。规定您需要加载的 URL。 |
data | 可选。规定连同请求发送到服务器的数据 |
function(response,status,xhr) | 可选。规定 load() 方法完成时运行的回调函数 |
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态
(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
xhr - 包含 XMLHttpRequest 对象|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$("div").load("http://127.0.0.1:8080/ajaxdemo/studentall",
function(resp,status,xhr){
if(status=="success"){
$("div").html("<table border='1px' width='500px'></table>");
var jsonobj=eval("("+resp+")");
$(jsonobj).each(function(index,element){
var tdstring="<td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+
"</td>";
$('<tr></tr>').html(tdstring).appendTo('table');
});
/*
if(jsonobj==null){
$('<tr></tr>').html("<td colspan='4'>没有记录</td>").appendTo('table');
}else{
if(jsonobj.length>0){
for(var i=0;i<jsonobj.length;i++){
var tdstring="<td>"+jsonobj[i].stuid+
"</td><td>"+jsonobj[i].stuname+
"</td><td>"+jsonobj[i].stuage+
"</td><td>"+jsonobj[i].stuaddress+
"</td>";
$('<tr></tr>').html(tdstring).appendTo('table');
}
}
}
*/
}
});
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试load"/>
<div></div>
</body>
</html>
2.$.ajax() 执行异步 AJAX 请求
定义和用法
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, … })
url | 规定发送请求的 URL。默认是当前页面 |
---|---|
type | 规定请求的类型(GET 或 POST)。 |
data | 规定要发送到服务器的数据 |
dataType | 预期的服务器响应的数据类型 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
async | 布尔值,表示请求是否异步处理。默认是 true |
error(xhr,status,error) | 如果请求失败要运行的函数 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#but1").click(function(){
//jquery的ajax方法的get方式
$.ajax({
url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
async:true,
type:"GET",
success:function(resp,status,xhr){
$("#main").empty();
//
//for(var i=0;i<resp.length;i++){
// rows="<tr><td>"+resp[i].stuid+
// "</td><td>"+resp[i].stuname+
// "</td><td>"+resp[i].stuage+
// "</td><td>"+resp[i].stuaddress+
// "</td></tr>";
// $("#main").append(rows);
//}
//
$(resp).each(function(index,element){
rows="<tr><td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+
"</td></tr>";
$("#main").append(rows);
});
},
dataType:"json"
});
});
$("#but2").click(function(){
//jquery的ajax方法的post方式1
//发往服务器的数据跟随在url后面【查询字符串参数】
/*
$.ajax({
url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
async:true,
type:"POST",
success:function(resp,status,xhr){
$("#main").empty();
$(resp).each(function(index,element){
rows="<tr><td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+
"</td></tr>";
$("#main").append(rows);
});
},
dataType:"json"
});
*/
//jquery的ajax方法的post方式2
//发往服务器的数据封装到http协议中【form表单提交数据】
$.ajax({
url:"http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
async:true,
type:"POST",
data:{stuid:'1001',stuname:'zhangsan'},
success:function(resp,status,xhr){
$("#main").empty();
$(resp).each(function(index,element){
rows="<tr><td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+
"</td></tr>";
$("#main").append(rows);
});
},
dataType:"json"
});
});
})
</script>
</head>
<body>
<input id="but1" type="button" value="测试ajax()_get"/>
<input id="but2" type="button" value="测试ajax()_post"/>
<table id="main" border="1px" width="500px"></table>
</body>
</html>
3. . g e t ( ) 使 用 a j a x 的 H T T P G E T 请 求 从 服 务 器 加 载 数 据 语 法 ∗ ∗ .get() 使用ajax的 HTTP GET 请求从服务器加载数据语法 ** .get()使用ajax的HTTPGET请求从服务器加载数据语法∗∗.get(URL,data,function(data,status,xhr),dataType)**
URL 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
unction(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
data - 包含来自请求的结果数据
status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地,jQuery 会智能判断。
可能的类型:
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应,并以纯文本返回
“json” - 以 JSON 运行响应,并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块,将添加一个 “?callback=?” 到 URL 来规定回调
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$.get("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid=1001&stuname=zhangsan",
function(resp,status,xhr){
$("#main").empty();
$(resp).each(function(index,element){
var row="<tr><td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+"</td></tr>";
$("#main").append(row);
});
},"json");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试get()"/>
<table id="main" border="1px" width="500px"></table>
</body>
</html>
4.$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法
$(selector).post(URL,data,function(data,status,xhr),dataType)
URL 必需。规定将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
data - 包含来自请求的结果数据
status - 包含请求的状态(“success”、“notmodified”、“error”、“timeout”、“parsererror”)
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地,jQuery 会智能判断。
可能的类型:
“xml” - 一个 XML 文档
“html” - HTML 作为纯文本
“text” - 纯文本字符串
“script” - 以 JavaScript 运行响应,并以纯文本返回
“json” - 以 JSON 运行响应,并以 JavaScript 对象返回
“jsonp” - 使用 JSONP 加载一个 JSON 块,将添加一个 “?callback=?” 到 URL 来规定回调
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$.post("http://127.0.0.1:8080/ajaxdemo/studentstuidstuname",
{stuid:'1001',stuname:'zhangsan'},
function(resp,status,xhr){
$("#main").empty();
$(resp).each(function(index,element){
var row="<tr><td>"+element.stuid+
"</td><td>"+element.stuname+
"</td><td>"+element.stuage+
"</td><td>"+element.stuaddress+"</td></tr>";
$("#main").append(row);
});
},"json");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试post()"/>
<table id="main" border="1px" width="500px"></table>
</body>
</html>