JavaScript—jQuery 的 ajax
jquery 调用 ajax 方法: $.ajax({})
格式:$.ajax({});
参数:
type:请求方式 GET/POST
url:请求地址 url
async:是否异步,默认是 true 表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用此函数
error:请求失败时调用此函数
实例:
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//GET请求
$.ajax({
type:"GET", // 请求类型 GET/POST
url:"js/data.json", // 请求路径
data:{ // 请求的参数,键值对
uname:"",
upwd:""
},
dataType:"json", // 预期服务器返回的数据类型
success:function(result){ // 回调函数,返回的数据
console.log(result);
}
});
//POST请求
$.ajax({
type:"POST", // 请求类型 GET/POST
url:"js/data.json", // 请求路径
data:{ // 请求的参数,键值对
uname:"",
upwd:""
},
dataType:"json", // 预期服务器返回的数据类型
success:function(result){ // 回调函数,返回的数据
console.log(result);
}
});
</script>
. g e t ( ) 和 .get()和 .get()和.post()
$.get():
1.请求 json 文件,忽略返回值
$.get(’…/js/cuisine_area.json’);
2.请求 json 文件,传递参数,忽略返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100});
3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
$.get(’…/js/cuisine_area.json’,function(data){
console.log(data)
});
4.请求 json 文件,传递参数,拿到返回值
$.get(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){
console.log(data)
});
$.post()同理
实例:
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
//$.get()
$.get("js/data.json",{},function(result){
console.log(result);
});
//$.post()
$.post("js/data.json",{},function(result){
console.log(result);
});
</script>
$.getJSON()
$.getJSON() 表示请求返回的数据类型是 JSON 格式的 ajax 请求
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$.get("js/data.txt",function(result){
console.log(result);//返回的数据类型是字符串
});
$.getJSON("js/data.txt",function(result){
console.log(result);//返回的数据类型是JSON格式
});
</script>
jsonp(待补充)
远程跨域时,如果有两个域名,从其中一个域名去访问另一个域名时,使用普通的 ajax 方法是获取不到数据的,那么就可以使用 jsonp 方式发送请求。
利用jQuery 的 ajax模拟向服务器请求数据并作操作:
<script src="js/jquery-3.4.1.js"></script>
<script>
$.getJSON("js/data.json",{},function(data){
//获得父元素table对象
var myTable=$("#myTable");
//遍历
for (var i= 0;i<data.length;i++){
//将集合对象赋值给user
var user=data[i];
//拼接新tr对象
var tr="<tr><td>"+user.uname+"</td><td>"+user.upwd+"</td><td>"+user.age+"</td></tr>";
//追加到表中
myTable.append(tr);
}
});
</script>