jQuery.ajax中success 和complete 区别

最新推荐文章于 2023-06-19 16:09:50 发布
最新推荐文章于 2023-06-19 16:09:50 发布
阅读量1.4w 收藏
点赞数
分类专栏： javascript/jquery 文章标签： xmlhttprequest function url 服务器
本文介绍了使用Ajax进行HTTP请求的基本方式，包括GET和POST方法，并详细解释了success回调函数用于处理状态为200的成功响应，以及complete回调函数用于处理所有完成的请求（无论成功与否）。此外还提到了error回调函数的作用。

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

success ： 当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据。当请求成功时调用函数，即status==200。
complete ：当请求完成时调用的函数。这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。当请求完成时调用函数，即status==404、403、302...。

无涯教程-jQuery - Ajaxcomplete方法函数
无涯教程
02-25 1429
ajaxComplete(callback)方法附加要在Ajax请求完成时执行的函数，这是一个Ajax事件。
谈谈Jquery ajax中success和complete有哪些不同点
11-22
在jQuery的AJAX方法中，`success`和`complete`都是重要的回调函数，它们在不同阶段被调用，处理不同的任务。理解它们的区别对于编写高效、健壮的AJAX请求至关重要。 首先，`success`函数是在AJAX请求成功时被调用的...
jQuery AJAX 方法 success()后台传来的4种数据
热门推荐
dream_heheda的博客
03-13 11万+
1.后台返回一个页面js代码2.返回一个基本类型3.返回一个自定义实体类4返回一个实体类的list
ajax请求的success方法与complete方法的区别
一位不知名小前端的一些笔记
12-03 3055
$.ajax({ url: './package.json', type: 'get', dataType: 'json', success: function (res) { console.log('success' + res); }, error: function (e
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 success 与 complete 区别
weixin_39037804的博客
10-05 397
作者QQ：1095737364 QQ群：123300273 欢迎加入！ 天天用,不知所以然: $.ajax({ type: "post", url: url, ...
jquery的ajax请求中的complete参数
smilelixiaojie的博客
09-24 3041
complete(xhr,status)是请求完成时运行的函数，有两个参数xhr对象和一个描述请求状态的字符串,status(“success”, “notmodified”, “nocontent”，“error”, “timeout”, “abort”, 或者 “parsererror”) 。。 先说一下jQuery中各个事件执行顺序： ajaxStart(全局事件)->beforeSend->ajaxSend(全局事件)->success->ajaxSuccess(全局事件)-
jquery success 不执行
weixin_34166847的博客
12-06 144
第一点：json 格式不对，少双引用之类 第二点：js文件没有引用（注：js可以用不是jquery可以用，有的时候以为js可以用那是默认的js函数，如果跳转可能js只要用相对路径就可以了）...
jquery ajax中success与complete的执行顺序
happyzpx
11-27 283
$.ajax({             type: "GET",                 dateType:"html",                 url: "index.html",                 error: function(msg) { alert("error"); },                 complete: function(msg) ...
js 通用表单提交4-ajax提交后success和complete、error的处理
leiting084的专栏
03-06 3612
上回书说到我们通过action和data处理已经获取了表单的提交地址和表单的数据，那么接下来就可以进行表单提交了。既然我们是通过js进行提交，那么我们就可以祭出我们的大杀器ajax了，通过ajax提交好处一大堆，比如可以无刷新提交等等。 这里我们遇到一个问题，我们在提交表单的时候发现部分表单提交了，但是却没有办法判断是否成功，这时候就需要ajax提交后的状态来进行判断了，举个栗子： 我们增加了红线画出来的部分，这是比较常见的用jquery的ajax方法提交的一种写法，在这里面success就是成
jQuery.ajaxComplete() 函数详解
chiji8087的博客
11-15 815
ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。 这是一个全局AJAX事件函数，用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数。当AJAX请求完成(无论成功或失败)时，将触发ajaxComplete事件，并执行绑定的事件处理...
jQuery—Ajax使用
永远不会懂
08-09 1472
AJAX是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新[百度百科]   ** XMLHttpRequest对象 XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 常用属性：
Jquery使用ajax的success回调函数不执行，但是能正常请求
m0_46745664的博客
06-19 2444
我曾经用的是 jQuery v1.10.2这次使用的是 jQuery 最新版本。
jquery里的success不执行
Palina
07-30 244
可能是json字符串格式不对 如：不是{"name":张三}     是{"name":"张三"}  
查看ajax传来的数据,jQuery AJAX 方法 success()后台传来的4种数据
weixin_39951295的博客
08-05 839
1.后台返回一个页面js代码/**(1)用$("#content-wrapper").html(data);显示页面*/$.ajax({async : false,cache : false,type : 'POST',url : 'area/prepareCreate',error : function() {alert('smx失败 ');},success : function(data) ...
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
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值