jQuery 发起 Ajax 请求最常用的三个方法

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest 进行了封装，提供了一系列 Ajax 相关的函数，极大地降低了 Ajax 的使用难度。

jQuery 中发起 Ajax 请求最常用的三个方法如下：

$.get()
$.post()
$.ajax()

一、$.get()

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
语法：

$.get(url, [data], [callback])

其参数如下表：

参数名	参数类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即即可

$.get('http://www.liulongbin.top:3006/api/getbooks',function (res) {console.log(res); // res 是服务器返回的数据})

发起带参数的请求时，以参数对象的形式添加第二个参数

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 },function (res) {console.log(res);})

二、$.post()

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
语法：

$.post(url, [data], [callback])

其参数如下表：

参数名	参数类型	是否必选	说明
url	string	是	提交数据的地址
data	object	否	要提交的数据
callback	function	否	数据提交成功时的回调函数

使用 $post() 向服务器提交数据

$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '肉蒲团', author: '李渔', publisher: '艺雅出版社' }, // 提交的数据function (res) { // 回调函数console.log(res);})

三、$.ajax()

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

$.ajax({type: ' ', // 请求的方式，如 GET 或 POSTurl: ' ', // 请求的URL地址data: {}, // 这次请求携带的数据success: function (res) { } // 请求成功后的回调函数
})

使用$.ajax()发起GET请求时，只需要将 type 属性的值设置为 ‘GET’ 即可

$.ajax({type: 'GET', // 请求的方式url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址data: { // 这次请求携带的数据id: 1},success: function (res) { // 请求成功后的回调函数console.log(res);}
})

使用$.ajax()发起POST请求时，只需要将 type 属性的值设置为 ‘POST’ 即可

$.ajax({type: 'POST', // 请求的方式url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址data: { // 要提交给服务器的数据bookname: '史记',author: '司马迁',publisher: '上海图书出版社'},success: function (res) { // 请求成功后的回调函数console.log(res);}
})

jQuery 发起 Ajax 请求最常用的三个方法相关推荐

JQuery发起ajax请求，并在页面动态的添加元素
页面html代码: <li><div class="coll-tit"><span class="coll-icon">&l ...
ajax.then()用法,使用es6的then()方法封装jquery的ajax请求
使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...
关于前端接口 jquery的ajax请求
关于jquery中ajax请求一.ajax语法二. 四种请求方式 1.get请求 2.post请求 2.1 默认格式 2.2 json格式请求 2.3 序列化表单值 2.3 FormData 3. ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法参考文章: (1)jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法 ( ...
jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
[原创]同一页面无法多次使用XmlHttp发起Ajax请求的真实原因
[原创]同一页面无法多次使用XmlHttp发起Ajax请求的真实原因小雨发表于 2008-3-28 13:17:00 /************* 作者:小雨(QQ群群号17639373) 声明: ...
六十八、完成Vue项目推荐和周末游组件，并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...

jQuery 发起 Ajax 请求最常用的三个方法

一、$.get()

二、$.post()

三、$.ajax()

jQuery 发起 Ajax 请求最常用的三个方法相关推荐

最新文章

热门文章