jQuery.ajax中success 和complete 区别

最新推荐文章于 2023-12-28 09:38:28 发布
原创 最新推荐文章于 2023-12-28 09:38:28 发布 · 1.5k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了Ajax中success和complete回调函数的区别与应用场景，解释了它们在异步请求中的作用，以及如何确保代码按预期顺序执行。

$.ajax({
      type: "post",
      url: url,
      dataType:'html',
      success: function(data) { },
     complete: function(XMLHttpRequest, textStatus) { },
     error: function(){}
});

success ： 当请求成功时调用的函数。
complete ：当请求成功时，整个请求都已经完成后调用的函数。

解析 ：一般情况下，用success做请求就可以，但是如果我们用了异步请求，又想按顺序执行代码，那就要用到complete。当然ajax也有同步属性：

async: false,//使用同步的方式,true为异步方式

效果一样

补充：complete 请求完成后回调函数 (请求成功或失败时均调用)

 

jQuery的ajax钩子函数：ajaxStart（）、ajaxSend（）、ajaxSuccess（）、 ajaxError（）、ajaxComplete（）、ajaxStop（）
YY的博客
11-16 747
jQuery的ajax钩子函数：ajaxStart（）、ajaxSend（）、ajaxSuccess（）、ajaxError（）、ajaxComplete（）、ajaxStop（）
谈谈Jquery ajax中success和complete有哪些不同点
11-22
在jQuery的AJAX方法中，`success`和`complete`都是重要的回调函数，它们在不同阶段被调用，处理不同的任务。理解它们的区别对于编写高效、健壮的AJAX请求至关重要。 首先，`success`函数是在AJAX请求成功时被调用的...
初学JQuery（3）：jquery-ajax
lalala_dxf的博客
05-05 615
简介 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。因此jQuery团队为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。 1、低级别接口 1.1 $.ajax(url,其他键值对) Ajax()不仅能实现与$ .load()，$ .get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、
【对ajax的研究】ajaxComplete()事件
qq_40273285的博客
10-25 855
ajaxComplete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。 与 ajaxSuccess() 不同，通过 ajaxComplete() 方法规定的函数会在请求完成时运行，即使请求并未成功 项目中遇到的问题：如下代码 当页面每次调用一个一个ajax，如接口port1，每次都会顺便调用returnMsgAjax， 找到问题代码如下，原来有一个ajaxCompl...
ajax请求的success方法与complete方法的区别
一位不知名小前端的一些笔记
12-03 3152
$.ajax({ url: './package.json', type: 'get', dataType: 'json', success: function (res) { console.log('success' + res); }, error: function (e
ajax complete调用方法,jquery – 在AJAX调用中使用success()或complete()
weixin_35712223的博客
08-06 2184
我想了解下面的AJAX调用,使用complete()方法;当我用success()替换complete()时,我会得到一个空的responseText,就像AJAX error()方法一样.另一方面,当我直接离开complete()方法的时候,一切都按预期运行.这是成功()返回早于complete()吗？$("#formnaw").submit(function() {var fnc = invo...
Jquery中$.post和$.ajax的用法小结
10-24
`$.post`和`$.ajax`是jQuery中用于实现Ajax（异步JavaScript和XML）请求的两个关键方法，它们允许我们在不刷新整个页面的情况下更新网页的部分内容，提高用户体验。 `$.post`是`$.ajax`的一个简化版本，主要用来...
jQuery中$.ajax()和$.getJson()同步处理详解
12-08
在jQuery中，$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法，它们主要用于与服务器进行异步数据交互。然而，在某些特定场景下，如处理表单提交前的验证，可能需要同步处理请求，确保数据正确无误后再...
Jquery版本导致Ajax不执行success回调函数
12-03
在JavaScript的世界里，jQuery库因其简洁的API和强大的功能，一直以来都是前端开发人员的得力助手，特别是其封装的Ajax函数，使得异步数据交互变得简单易行。然而，随着技术的发展，不同版本的jQuery对某些特性进行...
jQuery 中 ajax 的 complete 和 success 有什么区别
evilcry2012的专栏
11-20 940
jQuery 中 ajax 的 complete 和 success 有什么区别 咸蛋超人°thl | 浏览 2830 次 |举报 我有更好的答案 2015-08-01 16:00 最佳答案 success 是ajax成功后后执行的函数。 complete 是ajax完成后执行的函数。 你还少说个error，error是ajax失败后执行的函数
jquery complete
10-09
jquery autocomplete 完整实例
JQueryComplete
07-17
(C# AJAX点击文本框,从后台获取数据显示下拉列表(带有皮肤)) 资源包
AJAX：success，error，complete，beforeSend使用例子及解释
飘过的春风
02-17 9145
在与后台交互的时候，经常使用到jQuery的ajax()方法来请求数据； 回调函数用的比较多的是success，但是complete、beforeSend、error函数也是很有用的； beforeSend该函数用于发送请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。...
ajax success 和complete 的区别
aizhejuan4396的博客
12-14 223
ajax success 和complete 的区别 Function)success-当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据（根据“dataType”进行了格式化）。Function)complete-当请求完成时调用的函数...
jquery ajax中success与complete的执行顺序
热门推荐
zhao1949的专栏
10-11 2万+
http://blog.sina.com.cn/s/blog_4adc4b090101dhnh.html https://q.cnblogs.com/q/21810/ ****************************************************************** jquery中各个事件执行顺序如下： 1.ajaxStart(全局事件) 2.bef
jQuery.ajax success 与 complete 区别
weixin_39037804的博客
10-05 402
作者QQ：1095737364 QQ群：123300273 欢迎加入！ 天天用,不知所以然: $.ajax({ type: "post", url: url, ...
ajax的完整写法——success/error/complete+then/catch/done+设置请求头两种方法——基础积累
yehaocheng520的博客
12-28 2210
ajax的完整写法——success/error/complete+then/catch/done+设置请求头两种方法——基础积累
jquery.ajax的callback什么时候执行
最新发布
08-19
<think>我们之前已经讨论过Ajax回调的执行时机，但这次特别针对jQuery.ajax。在jQuery.ajax中，回调函数的执行时机如下： 1. **beforeSend**：在发送请求之前执行，可用于设置自定义头部或进行请求前的检查。 2. **success**：当请求成功完成（即服务器返回2xx状态码）并且响应数据已成功接收后执行。 3. **error**：当请求失败时执行（包括网络错误、超时、服务器返回4xx或5xx状态码）。 4. **complete**：无论请求成功还是失败，在请求完成后（即success或error回调执行后）执行。 此外，jQuery.ajax还返回一个jqXHR对象（类似Promise的对象），因此可以使用.done(), .fail(), .always()等方法添加回调，这些回调的执行时机与上述相同。 ### 示例代码 ```javascript $.ajax({ url: "https://api.example.com/data", method: "GET", beforeSend: function(xhr) { // 在发送请求前执行 console.log("请求即将发送"); // 可以在这里设置请求头 xhr.setRequestHeader("Authorization", "Bearer token"); }, success: function(data, textStatus, jqXHR) { // 请求成功时执行 console.log("成功:", data); }, error: function(jqXHR, textStatus, errorThrown) { // 请求失败时执行 console.error("失败:", textStatus, errorThrown); }, complete: function(jqXHR, textStatus) { // 请求完成后执行（无论成功或失败） console.log("请求完成，状态:", textStatus); } }); // 使用Promise风格 $.ajax({ url: "https://api.example.com/data", method: "GET" }) .done(function(data) { console.log("成功:", data); }) .fail(function(jqXHR, textStatus, errorThrown) { console.error("失败:", textStatus, errorThrown); }) .always(function() { console.log("请求完成"); }); ``` ### 详细解释 1. **beforeSend回调**： - 在请求发送之前调用，接收jqXHR对象作为参数。 - 如果此函数返回`false`，则取消Ajax请求。 2. **success回调**： - 当服务器返回2xx状态码时触发。 - 参数：`data`（解析后的响应数据，如果设置了`dataType`为'json'则会自动解析为JSON对象）、`textStatus`（描述成功的字符串，如"success"）、`jqXHR`（jQuery的XHR对象）。 3. **error回调**： - 当请求失败时触发（包括网络错误、超时、非2xx的HTTP状态码）。 - 参数：`jqXHR`（jQuery的XHR对象）、`textStatus`（错误描述，如"timeout"、"error"、"abort"等）、`errorThrown`（捕获的异常对象，通常为错误信息字符串）。 4. **complete回调**： - 在请求完成后触发，即在`success`或`error`回调之后执行。 - 参数：`jqXHR`（jQuery的XHR对象）、`textStatus`（请求完成状态，如"success"、"error"、"timeout"等）。 ### 回调执行顺序 1. `beforeSend`（如果返回`false`，则请求取消，后续回调不会执行） 2. 发送请求 3. 接收到响应后： - 如果成功：`success` -> `complete` - 如果失败：`error` -> `complete` ### 注意事项 - 回调函数中的`this`指向传递给`$.ajax`设置的配置对象。 - 使用`context`选项可以改变回调函数中`this`的指向。 §§相关问题§§: 1. jQuery.ajax中的jqXHR对象有哪些常用方法和属性？ 2. 如何使用jQuery.ajax发送JSON数据？ 3. 在jQuery.ajax中，如何设置请求超时并处理超时错误？ 4. jQuery.ajax的`dataType`选项有哪些可选值，它们分别代表什么？</think>### jQuery.ajax回调函数执行时机详解 jQuery.ajax提供了多种回调函数，它们在不同阶段执行： #### 主要回调函数及执行时机： 1. **`beforeSend`**：在请求发送**前**立即执行 2. **`success`**：请求**成功完成**（HTTP 200-299）时执行 3. **`error`**：请求**失败**（网络错误/HTTP 4xx/5xx/超时）时执行 4. **`complete`**：请求**完成后**（无论成功失败）执行 5. **Promise风格回调**：`.done()`(成功), `.fail()`(失败), `.always()`(完成) #### 完整执行顺序示例： ```javascript $.ajax({ url: 'https://api.example.com/data', method: 'GET', // 1. 请求发送前执行 beforeSend: function(jqXHR) { console.log('准备发送请求...'); jqXHR.setRequestHeader('X-Requested-With', 'jQuery'); }, // 2. 请求成功执行 (HTTP 200-299) success: function(data, textStatus, jqXHR) { console.log('成功获取数据:', data); }, // 3. 请求失败执行 error: function(jqXHR, textStatus, errorThrown) { console.error('请求失败:', textStatus, errorThrown); }, // 4. 请求完成后执行 (无论成功失败) complete: function(jqXHR, textStatus) { console.log('请求完成状态:', textStatus); } }); // Promise风格回调 $.ajax('https://api.example.com/data') .done(function(data) { console.log('成功:', data); }) .fail(function(jqXHR, textStatus) { console.error('失败:', textStatus); }) .always(function() { console.log('请求结束'); }); ``` ### 回调执行流程图 ```mermaid graph TD A[发起Ajax请求] --> B{请求发送前} B -->|执行| C[beforeSend] C --> D[发送请求] D --> E{服务器响应} E -->|HTTP 200-299| F[success] E -->|错误/超时| G[error] F --> H[complete] G --> H H --> I[结束] J[Promise风格] --> K{请求完成} K -->|成功| L[done] K -->|失败| M[fail] L --> N[always] M --> N ``` ### 关键细节说明： 1. **`beforeSend`**： - 可访问并修改jqXHR对象 - 返回`false`将取消请求 - 示例：添加认证头/显示加载动画 2. **`success` vs `.done()`**： ```javascript // 传统方式 $.ajax({ success: fn }); // 更现代的Promise方式 $.ajax().done(fn); ``` 3. **错误处理优先级**： ```javascript $.ajax({ error: function() { console.log('选项中的error回调'); } }).fail(function() { console.log('链式调用的fail回调'); // 后执行 }); ``` 4. **超时处理**： ```javascript $.ajax({ url: 'slow-api.com', timeout: 2000, // 2秒超时 error: function(jqXHR, textStatus) { if(textStatus === 'timeout') { console.error('请求超时'); } } }); ``` 5. **回调执行顺序**： ```javascript // 实际执行顺序： // 1. beforeSend // 2. success/error // 3. complete // 4. .done()/.fail() // 5. .always() ``` > **重要提示**：所有回调都在**jQuery的异步队列**中执行，不会阻塞UI渲染，但回调内的复杂操作可能影响页面性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qaakd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值