1.Ajax原理
特点: 局部刷新:异步调用(加载)
调用原理说明:
1.用户将请求发给AJAX引擎进行处理.之后等待引擎返回数据.
2.ajax引擎接收到用户的请求之后.,代替用户访问后端服务器,
3.后端服务器接收请求之后,执行业务处理. 并且将返回值返回.
4.ajax引擎收到返回值结果之后,要在第一时间通知给用户. 利用回调函数将数据传给客户端.ajax调用成功.
2.异步请求方式
2.1$.ajax()方式
$.ajax():是最核心的方法。
$.ajax()方法是一个有力并且直接的创建Ajax请求的方法。使用一个选项对象作为参数传给它,这个选项对象的属性配置了完成请求所需要的所有指令。
$.ajax()提供了成功以及失败的回调函数。
语法:
$.ajax({name:value, name:value, … })
<script type="text/javascript">
$(function() {
$.ajax({
type:"POST",
url:"/findAjax",
//data:{"id":100,"name":"喵"}
data:"id=100&name=喵",
success:function(result){
for(var user of result){
let id=user.id;
let name=user.name;
let age=user.age;
let sex=user.sex;
let tr="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td>/tr>"
$("#tab1").append(tr);
}
},
error:function(){
alert("请求失败!!!")
},
cache:false,//默认值true(缓存)
async:true//默认值true异步、false同步
});
})
</script>
参考: jQuery ajax() 方法.
2.2$.get()方式
语法:
$.get(url地址,param传递的参数,回调函数,返回值类型)
注:
参数:可选;
返回值类型:可以根据数据自动匹配类型(一般可以省略)
<script type="text/javascript">
$(function(){
$.get("/findAjax",function(result){
//1.可以使用js中的for循环
/* for(let i=0; i<result.length;i++){
} */
/* for(let index in result){
console.log(index);
} */
for(let user of result){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
let tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
$("#tab1").append(tr);
}
});
})
</script>
2.3$.post()方式
语法:
$.post(url地址,param传递的参数,回调函数,返回值类型)
注:
参数:可选;
返回值类型:可以根据数据自动匹配类型(一般可以省略)
<script type="text/javascript">
$(function(){
$.post("/findAjax",function(result){
for(let user of result){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
let tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
$("#tab1").append(tr);
}
});
})
</script>
2.4$.getJSON()方式
$.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用。
注:JSON是一种理想的数据传输格式,它能够很好的融合与JavaScript或其他宿主语言,并且可以被JS直接使用。
语法:
$.getJSON(url地址,param传递的参数(可选),回调函数)
<script type="text/javascript">
$(function(){
$.getJSON("/findAjax",function(result){
for(let user of result){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
let tr = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
$("#tab1").append(tr);
}
});
})
</script>
拓展: jQuery API 中文文档.