ajax传参、jQuery与Ajax的运用

使用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('失败了')
    }
});
除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 919
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top