Question

我总是使用这样的东西：

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

问题是当用户连接速度慢并点击该按钮时，似乎什么也没做，因为一旦请求出现，该按钮将改变自己的状态（添加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)
    });
});

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

Answer 1

你在那里有了一般的想法。您可以通过其他方式实现它，例如通过设置全局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
});

这些方法注册在某些事件时调用的处理程序，例如作为初始化或完成，发生任何AJAX请求这页纸。如果是，则会在每个AJAX请求上触发全局事件 jQuery.ajaxSetup（）中的全局属性为true，默认情况下为true。注意：从不为跨域脚本或JSONP触发全局事件请求，无论全局的价值如何。

来源：http://api.jquery.com/category/ajax/global-ajax-event-handlers/

Answer 2

这更像是一个UI问题，而不是代码。我个人更喜欢在没有响应的情况下显示微调器。由于我不知道你正在切换什么类以及它对元素有什么影响，我不知道在成功之前切换是否会让人感到困惑。

无论如何，每个人都知道装载微调器。这可能是安全的。

Answer 3

使用$.ajax success：

来自jquery docs：

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

Answer 4

您可以执行以下操作：

$("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);
    });
});

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

Answer 5

它总是取决于您构建网站的方式，但在我看来，活动状态只应在您点击的瞬间触发。

所以这应该是：onmousedown你添加你的类和onmouseup你删除它。

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

有几种方法可以构建它：像你一样单独在每个元素上，或者通过一般的样式功能。与Ajax一样，ajaxStart ajaxComplete函数与Jasper说的相同。

就我个人而言，我正在密切使用Ajax，总是动态地更改DOM，所以当使用给定类的元素出现在DOM中时，我使用livequery自动设置样式更改事件，并使用ajaxStart和ajaxComplete来显示加载对话框。

$ .post（）回调方法建议

5 个答案: