首页 > 其他分享 >详解AJAX请求

详解AJAX请求

时间:2022-10-04 21:33:17浏览次数:37  
标签:请求 get AJAX ajax 详解 参数 post 函数

Jquery---ajax向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面

接口链接

http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(GET请求)

http://www.liulongbin.top:3006/api/addbook 添加图书的接口(POST请求)

1.$.get()函数的语法

jQuery中$.get()函数的功能单一,专门用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。
$.get(url, [data], [callback])
其中,三个参数各自代表的含义如下:

2.$.get()发起不带参数的请求

使用$.get()函数发起不带参数的请求时,直接提供请求的URL地址和请求成功之后的回调函数即可
//这里的res是服务器返回的数据

运行代码,在浏览器中右击检查:
我们在这里可以看到我们Ajax请求的URL地址就是我们在$.get()里填写的地址,请求的方式为GET,专门在这个地址里拿数据,然后拿出来的数据可以通过响应看到,我们点击预览,这就是Pesponse(响应)里的内容经过美化后的数据:

3.$.get()发起带参数的请求

使用$.get()函数发起带参数的请求时,示例代码如下:
第二个参数是一个参数对象,这里模拟获取图书 id为1的信息

4.$.post()函数的语法
jQuery中$.post()函数的功能单一,专用来发起post请求,从而向服务器提交数据。
$.post()函数的语法如下:
$.post(url,[data],[callback]) //中括号包起来的说明是可选参数
其中,三个参数各自代表的含义如下:

5.$.post()向服务器提交数据
模拟添加图书信息:

6.$.ajax()函数的语法
相比于$.get()和$.post()函数, jQuery 中提供的$.ajax()函数,是一个功能比较综合的函数,它允许我们对Ajax请求进行更详细的配置。

$.ajax(函数的基本语法如下:

7.使用$.ajax()发起GET请求
使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET' 即可:

​8.使用$.ajax()发起POST请求
使用$.ajax()发起POST请求时,只需要将type属性的值设置为'POST' 即可,并且这是data参数放的是要提交给服务器的数据,具体示例参照

标签:请求,get,AJAX,ajax,详解,参数,post,函数
From: https://www.cnblogs.com/yxn001/p/16754489.html

相关文章