Jquery_ajax
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
jQuery中常用的AJAX方法
1.load()从服务器加载数据,并把返回的数据放置到指定的元素中
格式:$(selector).load(url,data,function(response,status,xhr))
url-您需要加载的 URL
data-请求参数
function(response,status,xhr)--完成时运行的回调函数
response - 包含服务器返回的结果数据
status - 包含请求的状态【"success"、"notmodified"、"error"、"timeout"、"parsererror"】
xhr - 包含 XMLHttpRequest 对象
2.$.ajax()--执行异步 AJAX 请求
格式:$.ajax({name:value, name:value, ... })
url----您需要加载的 URL 例如:$.ajax({url:”login”})
type--规定请求的类型(GET 或 POST) 例如:$.ajax({url:”login”,type:”GET”})
data--规定要发送到服务器的数据.
dataType--服务器响应的数据类型
success(result,status,xhr)---当请求成功时运行的函数
async---布尔值,表示请求是否异步处理。默认是 true。
error(xhr,status,error)--如果请求失败要运行的函数
3.$.get()--使用 AJAX 的 HTTP GET 请求从服务器加载数据
格式:$.get(URL,data,function(data,status,xhr),dataType)
url----您需要加载的 URL
data--规定要发送到服务器的数据.
function(data,status,xhr)---当请求成功时运行的函数
dataType--服务器响应的数据类型 “text” “json” “xml”
4.$.post()--使用 AJAX 的 HTTP POST 请求从服务器加载数据
格式:$(selector).post(URL,data,function(data,status,xhr),dataType)
url----您需要加载的 URL
data--规定要发送到服务器的数据.
function(data,status,xhr)---当请求成功时运行的函数
dataType--服务器响应的数据类型 “text” “json” “xml”
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jquery的ajax</title>
<!-- 导入jquery函数库-->
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function(){
$("#but1").click(function(){
$.get("http://127.0.0.1:8080/ajax/test",
function(data){
$("#h1").text(data);
},"text");
});
$("#but2").click(function(){
$.post("http://127.0.0.1:8080/ajax/test",
function(data){
$("#h1").text(data);
},"text");
});
//get发送有参数的请求
/*
$("#but3").click(function(){
var username=$("#text1").val();
var password=$("#text2").val();
$.get("http://127.0.0.1:8080/ajax/hello?username="+username+"&password="+password,
function(data){
$("#h1").text(data);
},"text");
});
*/
$("#but3").click(function(){
var username=$("#text1").val();
var password=$("#text2").val();
var data="username="+username+"&password="+password;
$.get("http://127.0.0.1:8080/ajax/hello",
data,
function(data){
$("#h1").text(data);
},"text");
});
//post发送有参数的请求
/*
$("#but4").click(function(){
var username=$("#text1").val();
var password=$("#text2").val();
$.post("http://127.0.0.1:8080/ajax/hello?username="+username+"&password="+password,
function(data){
$("#h1").text(data);
},"text");
});
*/
/*
$("#but4").click(function(){
var username=$("#text1").val();
var password=$("#text2").val();
var data="username="+username+"&password="+password;
$.post("http://127.0.0.1:8080/ajax/hello",
data,
function(data){
$("#h1").text(data);
},"text");
});
*/
$("#but4").click(function(){
var username=$("#text1").val();
var password=$("#text2").val();
var data={"username":username,"password":password};
$.post("http://127.0.0.1:8080/ajax/hello",
data,
function(data){
$("#h1").text(data);
},"text");
});
//get方式返回json字符串
$("#but5").click(function(){
$.get("http://127.0.0.1:8080/ajax/mytest",
function(data){
//dataType===“text”---json字符串==>json对象
//var jsonObj=JSON.parse(data);
//var stuinfo=jsonObj.stuid+","+jsonObj.stuname;
//$("#h1").text(stuinfo);
//dataType==="json"--json对象
$("#h1").text(data);
},"json");
});
//post方式,返回json
$("#but6").click(function(){
$.post("http://127.0.0.1:8080/ajax/mytest",
function(data){
//dataType==="json"--json对象
$("#h1").text(data);
},"json");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试get方法发送无参数的ajax请求">
<input id="but2" type="button" value="测试post方法发送无参数的ajax请求"><br>
<input id="but3" type="button" value="测试get方法发送有参数的ajax请求">
<input id="but4" type="button" value="测试post方法发送有参数的ajax请求"><br>
<input id="but5" type="button" value="测试get方法发送ajax请求,返回json">
<input id="but6" type="button" value="测试post方法发送ajax请求,返回json"><br>
<input id="text1" type="text" /><br>
<input id="text2" type="text" /><br>
<h1 id="h1"></h1>
</body>
</html>