@
目录浏览器中提供的 XMLHttpRequest 用法比较复杂,所以 jQuery 对 XMLHttpRequest 进行了封装,提供了一系列 Ajax 相关的函数,极大地降低了 Ajax 的使用难度。
graph TD A[XMLHttpRequest] --> B[jQuery中的Ajax] B --> C[$.get方法] B --> D[$.post方法] B --> E[$.ajax方法]/* 每次调用jquery的api发送ajax请求时都会先自动调用该方法 在这个函数中,可以拿到我们给Ajax提供的配置对象 options 从而能够统一的 为ajax请求 预先设置配置对象 */ $.ajaxPrefilter( function( options ) { // options.url; //配置对象中的 url 属性 }
官方中文文档
jQuery 中 $.get()
函数的功能单一,专门用来发起 get 请求,从而将服务器上的资源请求到客户端来进行使用。$.get()
函数的语法如下:
$.get(url, [data], [callback]) /*eg: response: 服务器端返回的数据*/ $.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {})
参数说明
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 要请求的 资源地址 |
data | object | 否 | 请求资源期间要携带的参数 |
callback | function | 否 | 请求成功时的回调函数 |
使用 $.get()
函数发起不带参数的请求时,直接提供请求的 URL 地址和请求成功之后的回调函数即可,示例代码如下:
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) { console.log(res) // 这里的 res 是服务器返回的数据 })
使用 $.get()
函数发起带参数的请求时,示例代码如下:
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) { console.log(res) })
jQuery 中 $.post()
函数的功能单一,专门用来发起 post 请求,从而向服务器提交数据。
$.post()
函数的语法如下:
$.post(url, [data], [callback]) //eg: $.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})
参数说明
参数名 | 参数类型 | 是否必选 | 说明 |
---|---|---|---|
url | string | 是 | 提交数据的地址 |
data | object | 否 | 要提交的数据 |
callback | function | 否 | 数据提交成功时的 回调函数 |
使用 $post()
向服务器提交数据的示例代码如下:
$.post( 'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址 { bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, // 提交的数据 function(res) { // 回调函数, res: 服务器返回的数据 console.log(res) } )
相比于 $.get()
和 $.post()
函数,jQuery 中提供的 $.ajax()
函数,是一个功能比较综合的函数,它允许我们对Ajax 请求进行更详细的配置。
$.ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://www.example.com', // 请求参数 data: { name: 'zhangsan', age: '20' }, // 指定传入服务器的参数格式类型, 默认值为'application/x-www-form-urlencoded' contentType: 'application/x-www-form-urlencoded', //contentType: 'application/json', 指定参数格式为json对象字符串 // 设置请求头字段 headers: { Authorization: localStorage.getItem('token') || '' }, //回调函数, 在请求发送之前被调用 beforeSend: function () { //当达到某种条件后, 通过如下语句来取消请求发送 return false }, // 回调函数, 在请求成功服务器端返回数据时被调用, response: 服务器端返回的数据 // $.ajax()内部会根据服务器端在响应头中设置的返回数据类型, 自动将返回的数据转换为对应的类型 success: function (res) {}, // 回调函数, 在请求失败时会被调用; xhr:ajax对象, 包含错误信息 error: function (xhr) {} // 无论请求失败或成功,当请求完成后会执行该函数 complete: function(res) { console.log(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({ type: 'POST', // 请求的方式 url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址 data: { // 要提交给服务器的数据 bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' }, success: function(res) { // 请求成功之后的回调函数 console.log(res) } })
$.ajax()
中默认的请求参数格式为contentType: 'application/x-www-form-urlencoded'
,data可以是 object 或者 String,如下
$.ajax({ data: { name: "张三", age: 14 } //或者 可直接传递urlencoded格式参数 字符串 data: "name=zhangsan&age=14"; })
上述两种data格式在默认参数格式下,都会被$.ajax()内部转换为 "name=zhangsan&age=14"
这种字符串格式传递给服务器
当请求参数被指定为contentType: 'application/json'
,那么data的格式就只能是 json字符串
var parms = {name: "zhangsan", age: 15}; $.ajax({ contentType: 'application/json', data: JSON.stringify(parms) })
上述请求参数将会以 json字符串的形式 '{"name":"wangwu","age":300}'
传递给服务器
当请求参数 是类型为FormData
格式的数据,需要添加如下的配置项
var fd = new Form(document.querySelected('form')); $.ajax({ method: 'POST', url: '/my/article/add', data: fd, // 注意:如果向服务器提交的是 FormData 格式的数据, // 必须添加以下两个配置项 contentType: false, processData: false, success: function(res) {} })
$.ajax()内部自动处理的<script>
标签的创建与销毁,以及src
属性的url地址的拼接,传递函数的参数名默认为 callback ,函数体为success回调函数,服务端需要手动响应callback函数的调用并传递数据参数
$.ajax({ url: 'http://www.example.com', // 指定当前发送jsonp请求 dataType: 'jsonp', // 修改callback参数名称 jsonp: 'cb', // 指定函数名称,请求成功执行该函数,不会再执行默认函数 jsonCallback: 'fnName', // 请求成功默认执行的回调函数 success: function (response) {} })
example:
// 客户端 $.ajax({ url: '/jsonp', dataType: 'jsonp', success: function (response) { console.log(response) // 浏览器控制台输出 {name: 'lisi', age: 50} } })
// 服务端 app.get('/jsonp', (req, res) => { res.jsonp({ name: 'lisi', age:50 }) });
请求地址:http://localhost/jsonp?callback=jQuery331004305437716135185_1632277196826&_=1632277196827
服务端响应值:/**/ typeof jQuery331004305437716135185_1632277196826 === 'function' && jQuery331004305437716135185_1632277196826({"name":"lisi","age":50});
function fn(response){ console.log(response); // 浏览器控制台输出 {name: 'zhaoliu'} } $.ajax({ // 客户端 url: '/jsonp', dataType: 'jsonp', jsonp: 'cb', jsonCallback: 'fn', success: function (response) { console.log(response) // 浏览器控制台输出 {name: 'zhaoliu'} } })
app.get('/jsonp', (req, res) => { const cb = req.query.cb const data = cb+"({name: 'zhaoliu'})" res.send(data); });
注意:success 回调函数在请求成功后依然会执行
请求地址:http://localhost/jsonp?cb=jQuery33105182463427317079_1632278123086&_=1632278123087
服务端响应值:jQuery33105182463427317079_1632278123086({name: 'lisi'})
form表单的基本使用
在 jQuery 中,可以使用如下两种方式,监听到表单的提交事件:
<form action="/login" id="form1"> <input type="text" name="user_name" /> <input type="password" name="password" /> <button type="submit">提交</button> </form>
$('#form1').submit(function(e) { alert('监听到了表单的提交事件') }) $('#form1').on('submit', function(e) { alert('监听到了表单的提交事件') })
当监听到表单的提交事件以后,可以调用事件对象的 event.preventDefault()
函数,来阻止表单的提交和页面的跳转,示例代码如下:
$('#form1').submit(function(e) { // 阻止表单的提交和页面的跳转 e.preventDefault() }) $('#form1').on('submit', function(e) { // 阻止表单的提交和页面的跳转 e.preventDefault() })
在使用如下 函数快速获取表单数据时,必须为每个表单元素添加 name
属性!
作用:一次性将表单中的数据自动拼接成 字符串类型的参数 并返回出来
//语法格式 $(selector).serialize()
<form id="form"> <input type="text" name="username"> <input type="password" name="password"> </form> <script> var params = $('#form').serialize(); //返回一个字符串 "name=zhangsan&age=30" </script>
作用:将表单中所有表单项以对象的格式添加到一个 数组 中并返回出来
<form id="form"> <input type="text" name="username"> <input type="password" name="password"> </form> <script> var ary = $('#form').serializeArray() // 返回一个数组 [{name: 'username', value: 'zhangsan'}, {name:'password', value='123456'}] </script>
该函数利用现有的 serializeArray()
进一步优化获取表单数据的返回值,
/* 作用: 将表单中用户输入的内容转换为对象类型 参数obj: jQuery封装的表单对象 返回值: 一个对象, 内部存储了表单数据 {表单项name:表单项value, ...} */ function serializeObject (obj) { // 处理结果对象 var result = {}; // [{name: 'username', value: '用户输入的内容'}, {name: 'password', value: '123456'}] var params = obj.serializeArray(); /* $.each(parms1, parms2) 作用: jquery中 $.each用来遍历对象或数组 parms1: 要被遍历的数组或对象 parms2: 每次遍历要执行的函数 index: 数组元素索引 或者 对象属性名 value: 数组元素值 或者 对象属性值 */ // 循环数组 将数组转换为对象类型 $.each(params, function (index, value) { result[value.name] = value.value; }) // 将处理的结果返回到函数外部 return result; }
jQuery 遍历 - each() 方法 (w3school.com.cn)
使用举例
<form id="form"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">提交</button> </form> <script> $('#form').on('submit', function(e){ //调用自定义函数 serializeObject 获取表单数据 let formValue = serializeObject($('#form')); console.log(formValue); // {username: "zhangsan", password: "123456"} }) </script>
一般表单数据通过ajax提交过后需要重置表单数据
form.reset - Web API 接口参考 | MDN (mozilla.org)
jQuery reset()重置表单_小小布的程序世界-CSDN博客
<!-- 导入 jQuery --> <script src="./lib/jquery.js"></script> <!-- 文件选择框 --> <input type="file" id="file1" /> <!-- 上传文件按钮 --> <button id="btnUpload">上传</button>
$('#btnUpload').on('click', function() { // 1. 将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表 var files = $('#file1')[0].files; // 2. 判断是否选择了文件 if (files.length <= 0) { return alert('请选择图片后再上传!‘) } })
// 向 FormData 中追加文件 var fd = new FormData() fd.append('avatar', files[0])
$.ajax({ method: 'POST', url: 'http://www.liulongbin.top:3006/api/upload/avatar', data: fd, // 不修改 Content-Type 属性,使用 FormData 默认的 Content-Type 值 contentType: false, // 不对 FormData 中的数据进行 url 编码,而是将 FormData 数据原样发送到服务器 processData: false, success: function(res) { console.log(res) } })
Ajax 请求开始时,执行 ajaxStart 函数。可以在 ajaxStart 的 callback 中显示 loading 效果,示例代码如下:
// 自 jQuery 版本 1.8 起,该方法只能被附加到文档 $(document).ajaxStart(function() { $('#loading').show() })
注意: $(document).ajaxStart()
函数会监听当前文档内所有的 Ajax 请求。
Ajax 请求结束时,执行 ajaxStop 函数。可以在 ajaxStop 的 callback 中隐藏 loading 效果,示例代码如下:
// 自 jQuery 版本 1.8 起,该方法只能被附加到文档 $(document).ajaxStop(function() { $('#loading').hide() })
只要页面中有Ajax请求被发送,对应的全局事件就会被触发
.ajaxStart() // 当请求开始发送时触发 .ajaxComplete() // 当请求完成时触发
比如,利用全局事件配合 NProgress.js 来完成请求时的进度条展示功能
$(document).on('ajaxStart', function(){ console.log('ajax请求开始'); NProgress.start(); }) $(document).on('ajaxComplete', function(){ console.log('ajax请求结束'); NProgress.done(); })