站长最近在项目中用调用一个分类的子数据，由于表单要填写的数据较多，为了实现无刷新的选择操作，就使用ajax做了异步查询。 查询的结果因为是多条数据，一直以来动用ajax查的都是单数据，还第一次使用多数据，惭愧。 TP5中查询的结果已经是一个数组对象，如果直接return回去，那么success函数获取的是一个对象，对象操作的结果还是要再一次转换成数组，讲起来都觉得麻烦，别说操作了。 开始做的时候想着，直接用PHP把数组处理好，返回给前端就好直接用了，所以对查询结果进行json编码，这个很简单，利用PHP内置json操作函数json_encode对array进行编码操作，然后return 这就简单了，现在只需将success返回的data丢到eval函数中就完事了，所以站长就匆匆写下这句var dataObj = eval("("+data+")");就操作后续重写html的事情了。
jQuery.ajax()提供的 jQuery.ajax() 的 callback 函式其中有 4 個 callbacks: beforeSend complete error success 当Ajax request 送出到完成，按照： 1、beforeSend 2、success or error 3、complete 调用你定义的 callback 函式，不管成功或者失敗 beforeSend 及 complete定义的的 callbacks 都会被调用 success 或 error 的 callback 则看 Ajax request 的成功或者失败结果來决定调用谁
Vite学习指南，基于腾讯云Webify部署项目。
只有在请求成功并接收到响应的时候才会执行这个success函数,这就是回调.传一个函数作为参数但是不执行,让另一个函数去调用,就是回调函数 1.2Callback 有点反直觉 callback 有一点「 $.ajax()函数会返回一个promise,然后在后面.then(success,fail)时候,如果成功了就会调用第一个参数里的函数即success函数,如果失败了就会调用第二个参数的函数即fail 看到第二个then里的函数吧第一次then里return的结果当做参数,继续处理. 所以promise的好处是如果想再次用两个函数,即再次对结果进行处理,就再then 一下,不需要再次取名字了 then的中文含义:然后! ,失败就调用then()函数第二个参数里的函数 简单的Promise原理: 自己封装后的Ajax()返回一个new出来的 Promise对象,一个Promise实例,这个Promise实例有一个then
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: "xml": 返回 XML 文档，可用 jQuery 使用 JSONP 形式调用函数时， 如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 success Function 请求成功后回调函数。 (request) { //请求前的处理... }, success: function(data) { //请求成功时处理..
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 context 为所有 AJAX 相关的回调函数规定 “this” 值。 data 规定要发送到服务器的数据。 dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。 dataType 预期的服务器响应的数据类型。 error(xhr,status,error) 如果请求失败要运行的函数。 global 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 jsonp 在一个 jsonp 中重写回调函数的字符串。 jsonpCallback 在一个 jsonp 中规定回调函数的名称。 password 规定在 HTTP 访问认证请求中使用的密码。
① 回调函数 如果需要处理 $.ajax() 得到的数据，需要使用回调函数。 dataFilter：在请求成功之后调用。传入返回数据以及“dataType”参数的值。并且必须返回（经处理的）数据传递给success回调函数。 success：当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 complete：当请求完成之后调用这个函数，无论成功或失败。 ②数据类型 $.ajax() 函数依赖服务器提供的信息来处理返回数据。 通过指定 dataType选项还可以指定不同的数据处理方式。 success(data, textStatus, jqXHR)：请求成功之后回调函数。参数由服务器返回，并根据dataType参数进行处理数据。
dataType:'JSON', // 4.data 设置发送给服务器的数据, 没有参数不需要设置 // 5.success 设置请求成功后的回调函数 success:function type 请求方式，默认是'GET'，常用的还有'POST' dataType 设置返回的数据格式，常用的是'json'格式 data 设置发送给服务器的数据，没有参数不需要设置 success 设置请求成功后的回调函数 , 没有参数不需要设置 3. success 设置请求成功后的回调函数 4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式 , xhr),dataType).error(func) url 请求地址 data 设置发送给服务器的数据，没有参数不需要设置 success 设置请求成功后的回调函数 data 请求的结果数据 status error 表示错误异常处理 func 错误异常回调函数 3.
: null, // 请求成功回调函数 14 fail: null // 请求失败回调 15 } 三、Ajax主体函数 以上我们定义了一大串请求有关的数据，接下来我们就开始Ajax主体函数的书写 ，这个函数接收三个参数，第一个是jsonpUrl，第二个是jsonp的回调函数名，第三个是成功回调函数，我们在这个函数内建立一个src为jsonpUrl的script元素插入到body中，同时，确定了回调函数 （如果我们定义了jsonpCallback函数就调用它，如果没有就调用success回调，一般情况我们不去定义全局的jsonpCallback函数而传递success回调来完成jsonp请求）。 六、xhr请求处理 好，处理好jsonp请求后，我们开始处理xhr请求了。 target[name] = options[name]; 27 } 28 } 29 return target; 30 }; 31 32 // jsonp处理函数
实际应用 结束语 引言 我们都知道，一个好的代码是有很强的维护性、阅读性的， 但是在Jacascript中的回调函数的量一增多， 很容易影响代码的阅读性，导致代码难以维护， 这种现象就叫做回调地狱， 为了解决这现象 时，回调函数的数量很多的时候的代码，以及使用Promise以后的代码吧。 console.log(data4) } }) }) 使用或不使用Promise， 这区别已经很明显了吧， 显而易见，使用完Promise后， 这种回调函数里面嵌套回调函数的代码就变得很简洁 时，就处于该状态，并且会回调then函数 reject: 拒绝状态，当我们主动回调了reject时 , 就处于该状态，并且会回调catch函数 三、函数then( ) 函数 then 是Promise中的一个方法 '] 上述代码中， all 函数传入一个数组，数组中的每个元素都是一个Promise实例， 只有当数组中的每个Promise实例都处于 fulfill 状态时，才会调用外部新包装成的Promise 的
jQuery内部也封装了对原生ajax请求的方法，可以很方便我们的对后台异步请求处理。 success 类型：Function 请求成功后的回调函数。 参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。 这是一个 Ajax 事件。 jsonp 类型：String 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" jsonpCallback 类型：String 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。 这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。
一般项目代码中会有不少异步 ajax 请求，例如测试下面 async.js 中的代码 import axios from 'axios'; // 传入 callback 函数进行处理 export const done()，当接口404会导致用例不执行 done(); }) }) 【2】返回 promise 处理成功，需要指定返回 expect 数量，否则可能直接走失败分支跳过 test }) }) 处理失败，需要指定返回 expect 数量，否则可能直接走成功分支跳过 test('fetchData2 返回结果为 404', () => { // 当接口不为404，则不会走catch ({ data: { success: true } }); }) 成功处理方式2 test('fetchData2 返回结果为 { success: true }', async /mock'); 4. mock - function 模拟函数调用 对于单元测试，无需关心外部传入的函数的实现，使用 jest.fn 生成一个 mock 函数，可以捕获函数的调用和返回结果，以及this
回调函数 如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete。 并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。 success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 complete 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。 $.ajax()的返回值为 jqXHR对象，因此可以利用 jqXHR对象的方法() jqXHR.done(function( data, textStatus, jqXHR ) {}); 成功回调选项的可选构造器 这四个回调函数是官网推荐的，可以取代上面四个回调函数，详细看http://api.jquery.com/jQuery.ajax/ jqXHR对象的属性 readyState responseXML
: 请求成功后的回调函数; **error: 请求失败后的回调函数; */ function ajax(opts){ //一、设置默认参数 defaults = { opts){ defaults[key] = opts[key]; } //三、对数据进行处理 if(typeof defaults.data === 'object method //处理缓存 defaults.cache = defaults.cache ? alert('返回数据是：' + data); } }); ajax({ url: '1.php', data: 'name=ivan&sex=male&age=23', cache : false, success: function (data){ alert('返回数据是：' + data); } }); 关于ajax缓存 只要是URL相同的GET请求，浏览器会使用缓存
函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 callback (Function) ：(可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。 callback (Function) ：(可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。 success Function 请求成功后回调函数。
同步与异步 在 ES5 中，异步编程的传统解决方案是通过回调函数或事件监听。undefined在 ES6 中，Promise 成为了异步编程的一种更合理更强大的解决方案。 console.log(2); 上述代码是一种传统异步编程的解决方案：通过回调函数实现。 假设多个请求存在依赖性，你可能就会写出如下代码： ajax(url, () => { // 处理逻辑 ajax(url1, () => { // 处理逻辑 ajax(url2, () => { // 处理逻辑 }) }) }) Promise Promise 是 ES6 中异步编程的一种解决方案，比传统的解决方案（回调函数或事件监听）更合理且更强大。 它有三个状态： pending：初始状态 fulfilled：操作成功 rejected：操作失败 当 promise 状态发生改变，就会触发 then() 里的响应函数处理后续步骤。
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
命令行工具
SSL 证书