Javascript $.post（）回调方法建议

我总是这样用：

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        $(this).toggleClass('active');
    });
});

问题是，当用户的连接速度很慢并单击该按钮时，它似乎什么也不做，因为一旦请求完成，该按钮将更改自己的状态（添加

活动

类）。当然，我可以通过在加载请求时添加微调器来“修复”这种行为

现在看看这个：

$("a.button").click(function() {
    $(this).toggleClass('active');
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
        // else, if there's an error: $(this).toggleClass('active)
    });
});

---

换句话说，当按下按钮时，我立即更改按钮状态，然后检查是否成功/错误。这是个好办法吗？你在想什么？还有其他方法吗？

你已经大致了解了。您可以通过其他方式实现它，例如通过设置全局AJAX

ajaxStart

和

ajaxSuccess

函数：

$("a.button").click(function() {
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // if request is successful do nothing
    });
}).ajaxStart(function () {
    $(this).toggleClass('active');
}).ajaxComplete(function () {
    $(this).toggleClass('active');
}).ajaxError(function () {
    //never forget to add error handling, you can show the user a message or maybe try the AJAX request again
});

这些方法注册在某些事件发生时要调用的处理程序，例如 作为初始化或完成，在 这一页。如果 jQuery.ajaxSetup（）中的全局属性为true，默认情况下为true。 注意：对于跨域脚本或JSONP，永远不会触发全局事件 请求，而不考虑全局值

---

来源：

使用

$。ajax

成功

：

发件人：

$.ajax({
  url: "test.html",
  success: function(){
    $(this).addClass("done");
  }
});

---

这与其说是代码，不如说是UI问题。就我个人而言，我更喜欢在没有回应的情况下显示微调器。因为我不知道您切换的是什么类以及它对元素有什么影响，所以我不知道在成功之前切换是否会让人困惑

---

不管怎样，每个活着的人都知道装载旋转器。这样做可能是安全的。

您可以执行以下操作：

$("a.button").click(function() {
    var old_text = $(this).text();
    var button = $(this);
    $(this).text('Processing...');
    $(this).attr('disabled', 'disabled'); // disable to button to make sure it cannot be clicked
    data = ...;
    url = ...;
    $.post(url, data, function() {
        // after request has finished, re-enable the link
        $(button).removeAttr('disabled');
        $(button).text(old_text);
    });
});

---

接下来，您应该做类似的事情来捕获错误（重新启用按钮）。

这始终取决于您构建站点的方式，但我认为活动状态应该只在您单击的瞬间触发

所以应该是：onmousedown添加类，onmousedup删除类

Ajax调用可能会触发一个不同的函数，可能会显示一个加载对话框/微调器

有几种方法可以构建它：像您所做的那样在每个元素上单独构建，或者通过常规样式功能构建。正如Jasper所说，ajaxStart和ajaxComplete函数同样适用于Ajax

---

就我个人而言，我一直在大量使用Ajax，总是动态地更改DOM，所以我使用livequery设置样式，当DOM中出现具有给定类的元素时，样式会随着事件自动更改，我使用ajaxStart和ajaxComplete显示加载对话框。

这取决于。。。您希望在Ajax请求的整个过程中还是在用户单击按钮的瞬间将按钮设置为活动状态？是的，根据您的描述，这是一种很好的方法。此外，您不能在$.post中使用$（此）。您必须先定义它：

var$t=$（this）；$。post（..函数（）{$t.toggleClass（..

@Nabab:我是这样要求的。如果我在请求完成后添加

活动类，我需要添加一个加载微调器。@Nabab:如果您认为在请求完成后或用户单击按钮时更改状态更好。如果您正在使用
ajaxStart
，您不应该使用
ajaxStop
？@JamesMontagne:
ajaxStop
在所有ajax请求完成时运行，其中as
ajaxComplete
对每个请求都运行。@没错，但他使用的是
ajaxStart
只对重叠请求运行一次。因此，您将在开始时切换一次，然后可能会在完成时切换多次。除非我误解了这可能会导致意外行为。@JamesMontagne
ajaxStop
在AJAX请求完成时运行，
ajaxComplete
运行以获得成功的AJAX响应，
ajaxError
运行以获得不成功的AJAX响应。因此，我喜欢使用
complete
error

，因此我的错误代码是“它与我的成功代码是分开的。@詹姆斯蒙塔涅：你说得对，

ajaxStart

也只运行一次。

ajaxSend

对每个请求运行一次。