3

我总是用这样的东西：

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

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

4

5 回答 5

2

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

无论如何，每个活着的人都知道加载微调器。这样做可能是安全的。

于 2012-02-10T20:06:09.490 回答
2

你已经有了大致的想法。您可以通过其他方式实现它，例如通过设置全局 AJAXajaxStart和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 请求发生某些事件（例如初始化或完成）时，这些方法注册要调用的处理程序。如果 jQuery.ajaxSetup() 中的全局属性为 true，则在每个 AJAX 请求上触发全局事件，默认情况下为 true。注意：无论 global 的值如何，都不会为跨域脚本或 JSONP 请求触发全局事件。

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

于 2012-02-10T20:04:11.320 回答
0

使用$.ajax success：

来自jquery 文档：

$.ajax({
  url: "test.html",
  success: function(){
    $(this).addClass("done");
  }
});
于 2012-02-10T20:05:36.840 回答
0

您可以执行以下操作：

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

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

于 2012-02-10T20:07:33.413 回答
0

它始终取决于您构建网站的方式，但在我看来，活动状态应该只在您点击的那一刻触发。

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

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

有几种构建它的方法：像您所做的那样在每个元素上单独构建它，或者通过通用样式函数。正如 Jasper 所说，对于具有 ajaxStart ajaxComplete 功能的 Ajax 也是如此。

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

于 2012-02-11T15:39:46.473 回答