jQuery -?AJAX 简介
Ajax 即“Asynchronous?Javascript?And?XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
jQuery -?AJAX的常用方法
1.? $.ajax执行异步 AJAX 请求
语法:
$.ajax({name:value, name:value, ... })
url????????:????????"后端处理程序的访问路径"---后端处理程序的访问路径。
type????????:????????"GET"/"POST"?---?规定请求的类型(GET?或?POST)。
data????????:????????{userid:userid}?---?规定要发送到服务器的数据。
dataType????????:????????"xml"/"text"/"json"??----规定预期的服务器响应的数据类型。
success????????:????????function(result,status,xhr)?---??规定当请求成功时运行的函数。
async????????:????????true/false??---布尔值,表示请求是否异步处理。默认是?true。
error????????:????????function(status,xhr,error)???---请求失败要运行的函数。
2. $.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
语法
$.get(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数
dataType---"text"、"json"---- 预期的服务器响应的数据类型.
3. $.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
语法:
$.post(URL,data,function(data,status,xhr),dataType)
url----后端处理程序的访问路径。
data---提交给后端处理程序的数据。
function(data,status,xhr)----当请求成功时运行的函数。
dataType---"text"、"json" ----?预期的服务器响应的数据类型。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../../Jquery-js/jquery-3.6.0.js"></script>
<title>jq-ajax</title>
<style>
.login{
width: 500px;
margin: auto;
background: rgb(55, 131, 182);
font-size: 25px;
text-align: center;
}
.login table{
margin: auto;
}
.login tr td:nth-of-type(1){
height: 50px;
text-align: left;
}
.login input{
width: 300px;
height: 30px;
}
</style>
</head>
<body>
<div class="login">
<h2>学生信息</h2>
<table style="text-align: center;">
<tr><td colspan="2" style="text-align: center;">用户登陆</td></tr>
<tr><td>账号:</td><td><input name="username" type="text" placeholder="请输入账号"></td></tr>
<tr><td>密码:</td><td><input name="password" type="password"></td></tr>
<tr ><td colspan="2" style="text-align: center;"><input id="submit" value="登陆" type="button" /></td></tr>
</table>
</div>
<script>
$(()=>{
$("#submit").click(function(){
var inputs = $("input[name]");
var uname = inputs[0].value;
var upwd = inputs[1].value;
$.get("http://localhost:8080/login?username="+uname
+"&password="+upwd,"text",function(res){
// console.log(JSON.parse(res).success == true)
if(JSON.parse(res).success == true){
console.log(1)
window.location.href = "../../../../JavaScript/20211013/03/1/ajax.html";
}
})
})
})
</script>
</body>
</html>
无奈源于不够强大
|