首先引入一個概念什麼是Ajax?
我們可以根據他的命名Ajax(Aynchronous JavaScript And XML),翻譯過來就是異步的JavaScript與XML。
什麼是異步的？
客戶端不需要等待服務端的響應。在服務器處理請求的過程中，客戶端可以進行其他操作。
實例：例如百度的搜索自動補全，還有註冊的時候提醒你用戶名已經被註冊過。這些不重新加載整個頁面的情況下，對網頁的某部分進行更新
Jauery實現Ajax有三種方式：$.ajax(), $.get(), $.post()
-
$.ajax()
* 語法：$.ajax({鍵值對})； * 使用$.ajax()發送異步請求 ```javascript $.ajax({ url:"ajaxServlet1111" , // 請求路徑 type:"POST" , //請求方式 //data: "username=jack&age=23",//請求參數 data:{"username":"jack","age":23}, success:function (data) { alert(data); },//響應成功後的回調函數 error:function () { alert("出錯啦...") },//表示如果請求響應出現錯誤，會執行的回調函數 dataType:"text"//設置接受到的響應數據的格式 }); ``` -
$.get()：發送get請求
* 語法：$.get(url,[data],[callback],[type]) * 參數： * url：請求路徑 * data：請求參數 * callback：回調函數（響應成功後要執行的） * type：響應結果的類型 -
$.post()：發送post請求
* 語法：$.get(url,[data],[callback],[type]) * 參數： * url：請求路徑 * data：請求參數 * callback：回調函數（響應成功後要執行的） * type：響應結果的類型
一個簡單案例加深一下理解：只給出前端的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在頁面加載完成後
$(function () {
//給username綁定blur事件
$("#username").blur(function () {
//獲取username文本輸入框的值
var username = $(this).val();
//發送ajax請求
//期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名已存在"}
// {"userExsit":false,"msg":"用戶名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判斷userExsit鍵的值是否是true
// alert(data);
var span = $("#s_username");
if(data.userExsit){
//用戶名存在
span.css("color","red");
span.html(data.msg);
}else{
//用戶名不存在
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="請輸入用戶名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="請輸入密碼"><br>
<input type="submit" value="註冊"><br>
</form>
</body>
</html>