jQuery-Ajax简介
1.AJAX是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
---|
语法:
$(selector).load(url,data,function(response,status,xhr))
url | 必需。规定您需要甲在的URL |
---|---|
data | 可选。规定连同请求发送到服务器的数据 |
function(response,status,xhr) | 可选。规定load()方法完成时运行的回调函数。 额外的参数: response-包含来自请求的结果数据 status-包含请求的状态 (“success”、“notmodified”、“timeout”、“parsererror”) xhr-包含XMLHttpRequest对象 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(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');
});
}
});
});
});
</script>
</head>
<body>
<input type="button" id="but1" value="测试load" />
<div id="">
</div>
</body>
</html>
$.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="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(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();
$(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 type="button" name="" id="but1" value="测试ajax()_get" />
<input type="button" name="" id="but2" value="测试ajax()post" />
<table border="1px" id="main" width="500px"></table>
</body>
</html>
$.get() | 使用ajax的HTTP GET请求从服务器甲在数据 |
---|
语法:
$.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="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>
$.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="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>