百度百科 它是這么 描述滴 !
Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML）绝骚，是指一種創(chuàng)建交互式腾啥、快速動態(tài)網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，無需重新加載整個網(wǎng)頁的情況下戏蔑，能夠更新部分網(wǎng)頁的技術(shù)假栓。
通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換年鸳，Ajax 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新俯在。
注意 哦 : ----Ajax 不是一種新的編程語言竟秫，而是一種用于創(chuàng)建更好更快以及交互性更強的Web應(yīng)用程序的技術(shù)。
主要優(yōu)缺點
使用Ajax的最大優(yōu)點朝巫，就是能在不更新整個頁面的前提下維護數(shù)據(jù)鸿摇。這使得Web應(yīng)用程序更為迅捷地回應(yīng)用戶動作，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息劈猿。
Ajax不需要任何瀏覽器插件拙吉，但需要用戶允許JavaScript在瀏覽器上執(zhí)行。
實例說話
GET 請求檢查用戶名是否存在
image-20200612184320448.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.js"></script><script>
$(function () {
// blur --> 當元素失去焦點時發(fā)生 blur 事件揪荣。
//blur() 函數(shù)觸發(fā) blur 事件筷黔，或者如果設(shè)置了 function 參數(shù)，該函數(shù)也可規(guī)定當發(fā)生 blur 事件時執(zhí)行的代碼仗颈。
$('#username').blur(function () {
console.log(this);
var username=$(this).val();
console.log(username);
//發(fā)送AJAX 請求 使用 get 方法
$.get('/check_username.do','username='+username,function (data) {
console.log(data);
console.log(data.msg);
console.log(data.success);
$('#result').html(data.msg).css('color',data.success?'green':'red');
// if(data.success){
// $('#result').css('color','green');
// }else{
// $('#result').css('color','red');
// }
})
})
})
</script>
</head>
<body>
<span id="result"></span></br>
<input type="text" id="username" placeholder="用戶名">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.js"></script><script>
$(function () {
$('#username').blur(function () {
var username=$(this).val();
$.get('/check_username.do','username='+username,function (data) {
$('#result').html(data.msg).css('color',data.success?'green':'red');
})
})
})
</script>
</head>
<body>
<span id="result"></span></br>
<input type="text" id="username" placeholder="用戶名">
</body>
</html>
@RequestMapping("/check_username")
@ResponseBody //加了 這個 就不是跳轉(zhuǎn)的意思 哦 注意
public JsonResult get(String username){
if("666".equals(username)){
return new JsonResult(false,"用戶名已被注冊");
}else {
return new JsonResult(true,"可以注冊");
}
}
POST 請求用戶登錄操作
image-20200612184212294.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Post</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.js"></script>
<script>
$(function () {
$('#login').click(function () {
console.log($('#username').val());
var username = ($('#username').val());
var password = ($('#password').val());
var param = {username: username, password: password}
$.post('/loginJson.do', param, function (data) {
if (data.success) {
location.
} else {
$('#result').html(data.msg).css('color', red)
}
});
})
})
</script>
</head>
<body>
<span id="result"></span></br>
<input id="username" placeholder="請輸入用戶名" type="text"/><br>
<input id="password" placeholder="請輸入密碼" type="text"/><br>
<button id="login">登錄</button>
</body>
</html>
@RequestMapping("/loginJson")
@ResponseBody //加了 這個 就不是跳轉(zhuǎn)的意思 哦 注意
public JsonResult post(String username,String password){
if("666".equals(username) && "6666".equals(password)){
return new JsonResult(true,"登陸成功");
}else {
return new JsonResult(false,"登錄失敗");
}
}
二級聯(lián)動
image-20200612184057501.png
@RequestMapping("/provinces")
@ResponseBody //加了 這個 就不是跳轉(zhuǎn)的意思 哦 注意
public List<Province> provinces(){
return Province.getAllProvince();
}
@RequestMapping("/cities")
@ResponseBody //加了 這個 就不是跳轉(zhuǎn)的意思 哦 注意
public List<City> cities(Long pid){
return City.getCityByProvinceId(pid);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省份和城市下拉框</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.js"></script>
<script>
$(function () {
//優(yōu)化下
var $p = $('#p')
var $c = $('#c')
$.get('/provinces.do', function (data) {
//console.log(data)
data.forEach(function (value) {
console.log(value)
console.log(value.id)
console.log(value.name)
$p.append('<option value="' + value.id + '">' + value.name + '</option>')
})
})
$p.change(function () {
var pid = $(this).val() //獲取被選中的 option value 屬性值
$c.empty();
$c.append('<option value="-1">請選擇</option>')
if (pid > 0) {//節(jié)省數(shù)據(jù)庫性能 不會 '請選擇' 也重新發(fā)起請求
$.get('/cities.do', 'pid=' + pid, function (data) {
data.forEach(function (value) {
$('#c').append('<option value=" ' + value.id + ' ">' + value.name + '</option>')
})
})
}
})
})
</script>
</head>
<body>
省份 : <select id="p">
<option value="-1">請選擇</option>
</select>
城市 : <select id="c">
<option value="-1">請選擇</option>
</select>
</body>
</html>
