jquery ajax给callback传域

本文介绍了一种使用jQuery和AJAX GETJSON方法来动态填充HTML表格的方法。通过遍历项目列表并发送异步请求获取每个项目的详细信息,然后将这些信息添加到指定的HTML表格中。
var table = $("table#output");
for( var i in items )
{
(function(){
var thisItem = items[i];
$.getJSON("myService", { "itemID": thisItem }, function(json)
{
var str = "<tr>";
str += "<td>" + thisItem + "</td>";
str += "<td>" + json.someMember + "</td>";
str += "</tr>";
table.append(str);
});
})();
}


原文:[url]http://stackoverflow.com/questions/444890/jquery-scope-or-race-condition-in-ajax-getjson[/url]
<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渲染,但回调内的复杂操作可能影响页面性能。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值