使用JS的XMLHttpRequest对象来获取数据,除了代码写得过长,而且还存在兼容性问题,jQuery的ajax帮我们做好了封装,让我们很容易就能使用ajax。
一、ajax传参
数据应该是动态的,而不是一成不变的。
比如一篇文章详情页,他用的模板是一样的,只是模板的内容不一样。
比如一个班级有20位学生,每位学生都有不同的姓名、年龄、爱好等,不可能分配20个不同的ajax地址,而是只会用一个ajax地址,然后使用参数区分。
这时就需要在使用ajax请求数据时,通过传参明确告诉ajax,需要获取具体的信息是什么?
通常这个地址称之为接口,一般是由后端开发人员提供。
举例:
//以下地址你可以到浏览器中测试下,然后手动修改id后面的值,比如将1改为2或其他数字
https://www.imqd.cn/ajax/student.php?id=1
以上提供了一个获取学生信息的接口地址,所有的学生都用该接口地址来获取,为了获取不同的学生,则需要修改id后面的值,即类似于函数传参,将参数通过url传递到后台,后台接收、处理后返回对应的数据到前台。
二、在jQuery中怎么使用ajax
使用JS的XMLHttpRequest对象来获取数据,除了代码写得过长,而且还存在兼容性问题,jQuery的ajax帮我们做好了封装,让我们很容易就能使用ajax。
语法如下:
$.ajax({name:value, name:value, ... })
常见的参数(除了标注必须的外,其他参数都可不写):
- type 规定请求的类型,(GET 或 POST),默认值为get则可以不写。
- url 规定发送请求的 URL。默认是当前页面。必须
- async 布尔值,表示请求是否异步处理。默认是 true。
- data 规定要发送到服务器的数据。
- dataType 预期的服务器响应的数据类型,一般不需要设置。
- timeout 规定请求的期限时间,默认没有期限
- cache 是否缓存请求过来的数据
- success(result,status,xhr) 当请求成功时运行的函数。必须
- error(xhr,status,error) 如果请求失败要运行的函数。
- complete(xhr) 无论数据请求成功与否,都会执行该函数
举例:
$.ajax({
//接口地址
url:"student.php?id=1",
// 获取成功后的回调函数
success:function(res){
// 如果数据获取成功,则res表示的就是ajax返回过来的数据
console.log(res)
},
// 如果获取失败,则执行下面的回调函数
error:function(err){
console.log('失败了')
}
});