百度百科 它是这么 描述滴 !
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
注意 哦 : ----Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
主要优缺点
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
实例说话
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 --> 当元素失去焦点时发生 blur 事件。
//blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。
$('#username').blur(function () {
console.log(this);
var username=$(this).val();
console.log(username);
//发送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 //加了 这个 就不是跳转的意思 哦 注意
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.href = 'http://www.baidu.com'
} 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 //加了 这个 就不是跳转的意思 哦 注意
public JsonResult post(String username,String password){
if("666".equals(username) && "6666".equals(password)){
return new JsonResult(true,"登陆成功");
}else {
return new JsonResult(false,"登录失败");
}
}
二级联动
image-20200612184057501.png
@RequestMapping("/provinces")
@ResponseBody //加了 这个 就不是跳转的意思 哦 注意
public List<Province> provinces(){
return Province.getAllProvince();
}
@RequestMapping("/cities")
@ResponseBody //加了 这个 就不是跳转的意思 哦 注意
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 () {
//优化下
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) {//节省数据库性能 不会 '请选择' 也重新发起请求
$.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>
网友评论