为什么Chrome和Firefox处理jQuery ajax（）回调中的javascript变量设置不同？ [英] Why do Chrome and Firefox handle javascript variable set inside jQuery ajax() callback differently?

问题描述

使用jQuery 1.9.1，调用服务器来检查一些数据：

  $ form = $（＃ form2）
 var str = $ form.serialize（）; 
 status = true; 
 $ .ajax（{
 type：'POST'，
 url：'check_zip.php'，
 data：str，
 async：false，
成功：function（data）{
 obj = JSON.parse（data）; 
 var result = obj.result; 
 status = result; 
}，
 （msg）{
 alert（msg）; 
 status = false; 
} 
}）; 
 
 if（status ==false|| status === false）{
 .... 
  

我发现Chrome会返回状态false（字符串），Firefox会返回状态false（布尔值）。这是预期的行为？我很惊讶！

$ b 正在解析的JSON是data：{result：false}

typeof（status）在Chrome中是字符串，在FF中是布尔值。

这个问题似乎出现在这里：

  var result = obj.result; 
 status = result; 
  

由于Chrome中结果的数据类型是布尔值，而status的数据类型是字符串。

解决方案

明白了。问题是宣布地位之前缺失的var。

由于@bfavaretto在下面指出，状态已经被定义为一个全局变量。所以，如果我使用了一个名为ajax_status的变量，那么我可以没有使用var 或，我可以使用status变量名，但是必须使它成为本地变量（使用var ）。

以下代码在FF和Chrome中都很像冠军。

  $ form = $（＃form2）
 var str = $ form.serialize（）; 
 var status = true; //< --- change 1  -  usevar
 $ .ajax（{
 type：'POST'，
 url：'check_zip.php'，
 data ：str，
 async：false，
 success：function（data）{
 obj = JSON.parse（data）; 
 var result = obj.result; 
 status = result; 
}，
 error：function（msg）{
 alert（msg）; 
 status = false; 
} 
}）; 
 
 if（status === false）{//<  -  change 2  - 只是使用布尔比较
 ... 
  pre> 
 
 
另一种编码方式是
 
 pre $ var ajaxreturn = $ .ajax（{
 type：'POST'，
 url：'check_zip.php'，
 data：str，
 async：false，
 success：function （数据）{
}，
错误：函数（msg）{
 alert（意外的服务器对zip验证的响应）; 
} 
}）; 
 
 var status = false; 
尝试{
 obj = JSON.parse（ajaxreturn.responseText）; 
 status = obj.result; 
} catch（e）{
 status = false; 
 
 
 if（status === false）{
 ... 
  

，可能最好的做法是不重复使用现有的变量名称状态，所以使用第二个例子，这会给

pre > var ajaxreturn = $ .ajax（{
type：'POST'，
url：'check_zip.php'，
data：str，
async ：
成功：函数（数据）{
}，
错误：函数（msg）{
alert（对zip验证意外的服务器响应）;
}
}）;

var check_status = false;
尝试{
obj = JSON.parse（ajaxreturn.responseText）;
check_status = obj.result;
} catch（e）{
check_status = false;


if（check_status === false）{
...


Using jQuery 1.9.1, calling back to the server to check some data:

    $form = $("#form2")
    var str  = $form.serialize();
    status = true; 
    $.ajax({
           type    : 'POST',
           url     : 'check_zip.php', 
           data    : str,
           async   : false,
           success : function (data) {
             obj = JSON.parse(data); 
             var result = obj.result;
             status = result; 
           },
           error   : function (msg) {
               alert(msg);
               status = false;
           }
       });

    if (status == "false" || status === false) {
        ....

I found that Chrome would return status "false" (string) and Firefox would return status false (boolean). Is this expected behavior? I was astonished!

The JSON being parsed is data: "{"result":false}"

typeof(status) is string in Chrome and boolean in FF.

The issue seems to arise here:

         var result = obj.result;
         status = result; 

Because the datatype of result in Chrome is boolean, whereas the datatype of status is string.

解决方案

Got it. The issue was the missing "var" before the declaration of status.

As @bfavaretto noted below, status is already defined as a global variable. So if I had used a variable named like "ajax_status" I would have been fine without the var or I could have used the "status" variable name, but would have had to make it local (using var).

The following code works like a champ in both FF and Chrome.

$form = $("#form2")
var str  = $form.serialize();
var status = true;                 // <--- change 1 - use "var" 
$.ajax({
       type    : 'POST',
       url     : 'check_zip.php', 
       data    : str,
       async   : false,
       success : function (data) {
         obj = JSON.parse(data); 
         var result = obj.result;
         status = result; 
       },
       error   : function (msg) {
           alert(msg);
           status = false;
       }
   });

if (status === false) {        // <-- change 2 - just use boolean comparison
   ...

Another way to code this would be

    var ajaxreturn = $.ajax({
           type    : 'POST',
           url     : 'check_zip.php', 
           data    : str,
           async   : false,
           success : function (data) {
           },
           error   : function (msg) {
              alert("Unexpected server response on zip validation"); 
           }
       });

    var status = false; 
    try { 
       obj = JSON.parse(ajaxreturn.responseText); 
       status = obj.result; 
    } catch (e) { 
      status = false;
    }

    if (status === false) { 
       ... 

and probably the best practice would be not to reuse the existing variable name status, so using the second example, this would give

    var ajaxreturn = $.ajax({
           type    : 'POST',
           url     : 'check_zip.php', 
           data    : str,
           async   : false,
           success : function (data) {
           },
           error   : function (msg) {
              alert("Unexpected server response on zip validation"); 
           }
       });

    var check_status = false; 
    try { 
       obj = JSON.parse(ajaxreturn.responseText); 
       check_status = obj.result; 
    } catch (e) { 
      check_status = false;
    }

    if (check_status === false) { 
       ... 

这篇关于为什么Chrome和Firefox处理jQuery ajax（）回调中的javascript变量设置不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！