Question

我使用$.post发送用户输入构建的json结构：

$.post(
    url1,
    {'input': JSON.stringify(input)},
    function(data) {
        if (data['status']) window.location.href = url2;
        else window.location.href = url1;
    }
);

重定向总是在帖子后发生。我的问题是浏览器似乎在帖子期间处于非活动状态，并且在重定向开始之前没有显示任何活动（即加载进度），这导致大约1秒时看似没有任何事情发生。通过活动我只是指浏览器的标准方式告诉用户它正在加载页面（例如我的firefox选项卡上显示的进度圈）。发布后，有没有办法调用此标准行为？

编辑：有些人问我为什么不简单地使用标准表单提交。嗯，这是因为我需要发送的数据有点复杂，我不知道这样的事情是否可以通过标准（非ajax）方式完成。这就是我构建数据的方式：

var input = [];
$('.shopCat > p > input').each(function() {
      input.push({
        'id': $(this).closest('div').attr('id'),
        'name': $(this).val(),
        'parent': $(this).closest('div').attr('data-parent');
    });
});

是否可以使用标准的帖子表单构建和发布此类数据？（所以我现在实际上问了两个问题。）

Answer 1

在jQuery或javascript中没有打包的方法。您可以想象有很多场景让人们选择显示等待图标。只需在发布前显示您的等待内容，然后在回调中隐藏它。

$('#waiting').show(); //show waiting icon or whatever
$.post(
    url1,
    {'input': JSON.stringify(input)},
    function(data) {
        $('#waiting').hide();  //hide it on callback
        if (data['status']) window.location.href = url2;
        else window.location.href = url1;
    }
);

如果您对所需内容有具体了解，请告诉我们。就像你想要一个模态窗口，或一个特定的div被掩盖。进度条，其中一个圆圈标签，请等待文字等等。

Answer 2

您可以使用jquery blockui plugin来指示某些异步操作正在进行中......只需在发布之前调用blockUI，并在回调中调用unblockUI。它不是必要的阻止UI ...在这里查看examples并查看“Growl”选项或适合您用例的内容。

Answer 3

如果总是发生重定向，为什么要使用AJAX请求而不是将表单发布到服务器并在服务器端重定向？从保存请求开始，您也可以获得更好的性能。

Answer 4

好吧，你不能强迫浏览器看起来很忙。但您可以将光标设置为忙碌

$(document).css('cursor','wait');
$.post(
url1,
{'input': JSON.stringify(input)},
function(data) {
    if (data['status']) window.location.href = url2;
    else window.location.href = url1;

}
);

虽然不使用ajax 可能会更好，但只需使用普通表单提交，因为无论如何您都选择了重定向。

jquery post request：如何表示浏览器活动

4 个答案: