文章目录
前言
jquery将它封装成了一个方法$.ajax(),所以在使用该方法时,必须先引用jQuery.js库。
<script src="js/jquery-1.11.4.min.js"></script>
一、$.ajax、
jQuery调用ajax方法:
格式:$.ajax({});
参数:
url:请求地址
type :请求方式,默认是'GET',常用的还有'POST'
dataType :设置返回的数据格式,常用的是'json'格式
data :设置发送给服务器的数据, 没有参数不需要设置
success :设置请求成功后的回调函数
error :设置请求失败后的回调函数
async: 设置是否异步,默认值是'true',表示异步,一般不用写
示例:
<script>
$.ajax({
// 1.url 请求地址
url:请求的对应地址,
// 2.type 请求方式,默认是'GET',常用的还有'POST'
type:'GET',
// 3.dataType 设置返回的数据格式,常用的是'json'格式,,如若不是json类型文件则需要调用JSON.parse()方法将返回来的数据转换成对象格式方便操作
dataType:'JSON',
// 4.data 设置发送给服务器的数据, 没有参数不需要设置
// 5.success 请求成功后的回调函数
success:function (res) {
console.log(res);
},
// 6.error 请求失败后的回调函数
error:function () {
alert("请求失败");
},
// 7.async 设置是否异步,默认值是'true'表示异步
async:true
});
</script>
二、$.get
$.ajax按照请求方式可以简写成$.get
示例:
// 1.请求json文件,忽略返回值
$.get('请求地址 ' );
// 2.请求json文件,传递参数,忽略返回值
$.get('请求地址 ' ,{name : "tom" ,age : 18});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get('请求地址' ,function(data){
console.1og(data);
});
// 4.请求json文件,传递参数,拿到返回值
$.get('请求地址 ', {name : " tom" , age:18}, function(data){
console.log(data) ;
});
// 此处的请求地址的文件是json格式型
三、$.post
$.ajax按照请求方式可以简写成$.post
示例:
// post跟get差不多,只是请求的方式不同
// 1.请求json文件,忽略返回值
$.post('请求地址 ' );
// 2.请求json文件,传递参数,忽略返回值
$.post('请求地址 ' ,{name : "tom" ,age : 18});
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.post('请求地址' ,function(data){
console.1og(data);
});
// 4.请求json文件,传递参数,拿到返回值
$.post('请求地址 ', {name : " tom" , age:18}, function(data){
console.log(data) ;
});
// 此处的请求地址的文件是json格式型
四、$.getJSON
$.ajax按照请求方式可以简写成$.getJSON。这种方式相较于get和post请求方式对于返回文件的类型有固定要求,这种方式返回的数据必须是json类型的数据。
示例:
// 请求json文件,传递参数,拿到返回值
$.getJSON('请求地址 ', {name : " tom" , age:18}, function(data){
console.log(data) ;
});
总结
- ajax 是发送http请求获取后台服务器数据的技术
- ajax的简写方式为$.get和$.post
- 当返回的数据不是json类型文件则需要调用JSON.parse()方法将返回来的数据转换成对象格式方便操作