Question

使用以下代码：

            $('#langHref').html("Translating...").css("color","#FF9933");

            jQuery.ajax({
                type: "post"
                 , url: someUrl
                 , data: { "text": $('body').html() }
                 , async: false 
                 , success: function (data, status) {  
                     $('body').html(data);                      
                 },
                error: function () {
                    alert('We are sorry, there was an error in the translation service.');
                    //console.log("ERROR", arguments);
                }
            });

            $('#langHref').html("Select Language").css("color","");
        }

我有一个<a>标签，其id为“langHref”，这里的想法就是在调用ajax之前，链接文本设置为“Translating ...”，其颜色变为橙色。在ajax完成后，链接文本将更改回标准“选择语言”。

这在FF中运行良好但在IE和Chrome中失败。我已经尝试了所有的beforeSend jQuery选项和ajaxSend事件，试图在ajax发布之前设置它但无济于事。

如果我关闭async：false，那么很明显它会立即将文本更改回“选择一种语言”而你看不到它的工作原理。我也试过async：true并在beforeSend中调用“Translating ....”调用，这在我试过的任何浏览器中都不起作用。

思想？

Answer 1

我认为您想要将beforeSend添加到您的ajax请求中，并在此处执行此操作：

beforeSend: function ( xhr ) {
    $('#langHref').html("Translating...").css("color","#FF9933");
 }

也是一个完整的方法：

complete : function(jqXHR, textStatus) {
            $('#langHref').html("Select Language").css("color","");
},

Answer 2

可以通过改变来完成 async属性true 并将最后一行放在已完成的事件中。像这样：

            jQuery.ajax({
                type: "post"
                 , url: someUrl
                 , data: { "text": $('body').html() }
                 , async: true
                 , success: function (data, status) {  
                     $('body').html(data);                      
                 },
                error: function () {
                    alert('We are sorry, there was an error in the translation service.');
                    //console.log("ERROR", arguments);
                },
               completed:function(){
                   $('#langHref').html("Select Language").css("color","");
                },
                beforeSend:function(){
                $('#langHref').html("Translating...").css("color","#FF9933");
                 }
            });

可能发生的事情是，在更改UI之前因为jQuery ajax函数是异步的，它会阻止UI，因此无法更改。

IE＆amp; Chrome在ajax发布之前忽略了jQuery调用

2 个答案: