如何显示在浏览器同步Ajax调用等待消息 [英] How to show waiting message during sync ajax call in browser

问题描述

如何显示上同步Ajax调用浏览器等信息？ 我试图跌破code，打开Web服务器关闭，但不显示保存的字样。

经过一段时间后，从AJAX调用唯一的错误事件发生时，没有任何进展的消息。

如何显示等待消息，如果用户同步Ajax调用在进行中？

  VAR MyInfo的='＆LT; D​​IV CLASS =UI状态高亮UI的角落都的风格=的位置是：固定; +
    '的z-index：10000;的margin-top：2％;保证金左：2％＆GT; +
    '＆LT; BR /＆GT; +
    '和; NBSP;＆LT;跨度类=UI图标UI图标，信息的风格=浮动：左;保证金右：.3em;＆GT;＆LT; / SPAN＆GT; +
    '＆LT;强＆GT;储蓄和LT; / STRONG＆GT;＆安培; NBSP;＆LT; BR /＆GT; +
    '＆LT; BR /＆GT;＆LT; / DIV＆GT;
$（'#_信息）HTML（MyInfo的）;
$（'#_信息）显示（）。

$阿贾克斯（保存，
   {
       异步：假的，
       键入：POST
    }）;
 

解决方案

您的问题是，您使用的是同步的AJAX调用和pretty的多锁定浏览器，直到它完成。特别是，浏览器将无法显示你的加载消息，按 $ AJAX（异步{：假}）之前。锁定;例如，看一下这个是干什么：

  

http://jsfiddle.net/ambiguous/xAdk5/

请注意，按钮也不会更改回unclicked可视状态，而AJAX运行？

解决的办法是，以显示你的加载信息，手动控制回浏览器，然后锁定一切都与你同步远程调用。这样做的一个方法是使用 的setTimeout 用零延迟：

  $（'#_信息）HTML（MyInfo的）。
$（'#_信息）显示（）。
的setTimeout（函数（）{
    $阿贾克斯（'保存'，{
        异步：假的，
        键入：POST，
        完成：函数（）{
          $（'#_信息）隐藏（）。
        }
    }）;
}，0）;
 

例如： http://jsfiddle.net/ambiguous/zLnED/

有些保健将需要当然是这不会是的setTimeout 回调，因为它里面的一样在外面，但是这很容易打理。

使用异步：假不是一个非常好的事情，虽然是做给你的用户，你应该尽量避免，除非它是绝对必要的（而且很少是）。

How to show waiting message on sync ajax call in browser ? I tried code below, turned web server off but "Saving" message is not displayed.

After some time only error event from ajax call occurs, without any progress message.

How to show waiting message to user if sync ajax call is in progress ?

var myInfo = '<div class="ui-state-highlight ui-corner-all" style="position: fixed;' +
    'z-index: 10000; margin-top: 2%; margin-left: 2%">' +
    ' <br />' +
    '&nbsp;<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>' +
    '<strong>Saving</strong>&nbsp;<br />' +
    '<br /></div>'
$('#_info').html(myInfo);
$('#_info').show();

$.ajax( 'save',
   {
       async: false,
       type: 'POST'
    } );

解决方案

Your problem is that you're using a synchronous AJAX call and that pretty much locks up the browser until it completes. In particular, the browser won't be able to show your "loading" message before you hit the $.ajax({async:false}) lockup; for example, watch what this does:

http://jsfiddle.net/ambiguous/xAdk5/

Notice that the button doesn't even change back to the unclicked visual state while the AJAX is running?

The solution is to show your loading message, hand control back to the browser, and then lock everything up with your synchronous remote call. One way to do this is to use setTimeout with a delay of zero:

$('#_info').html(myInfo);
$('#_info').show();
setTimeout(function() {
    $.ajax('save', {
        async: false,
        type: 'POST',
        complete: function() {
          $('#_info').hide();
        }
    });
}, 0);

For example: http://jsfiddle.net/ambiguous/zLnED/

Some care will be needed of course as this won't be the same inside the setTimeout callback as it was outside but that's easy to take care of.

Using async:false isn't a very nice thing to be doing to your users though, you should try to avoid it unless it is absolutely necessary (and it rarely is).

这篇关于如何显示在浏览器同步Ajax调用等待消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！