最近遇到了一个关于在form中通过ajax请求传递数据的时候，ajax返回的结果竟然是“0”，且ajax.status为“canceled”，之前从未遇到过这种情况，最后在网上收集些资料，发现有人和我一样遇到相同的问题。现此种情况记录如下：

default_ajax.php前端页面：

  1. <body>

  2.  <form action="" method="post" name="from_status" id="from_status">

  3.     <textarea name="textarea" id="textarea_status"></textarea>

  4.     <input type="submit" value="提 交" name="sub_status" id="sub_status"/>

  5.  </form>

  6. </body>




页面JS块：

  1. <script type="text/javascript">

  2. window.onload = function()

  3. {

  4.   var oFrom_status = document.getElementById("from_status");

  5.   var oTextarea_status = document.getElementById("textarea_status");

  6.   var oSub_status = document.getElementById("sub_status");


  8.   oFrom_status.onsubmit = function()

  9.   {

  10.      if(oTextarea_status.value==""||oTextarea_status.value.length<=0)

  11.       {

  12.           alert("内容不可为空，请输入你要分享的内容！");

  13.           oTextarea_status.focus();

  14.           return false;

  15.        }


  18.       var oContents = oTextarea_status.value;

  19.       var url = "index_m_ser.php";


  22.       ajax(url, function(str_result){

  23.                              alert("返回请求的数据："+ str_result);

  24.                           }, function(str){ alert("请求失败："+str);}

  25.             );

  26.    }

  27. }


  29. //Ajax函数

  30. function ajax(url,fnSucc, fnFaild)

  31. {

  32. //1.创建Ajax对象,

  33.   if(window.XMLHttpRequest)

  34.   {

  35.       var oAjax=new XMLHttpRequest();   //IE7+, Chrome, Firefox

  36.   }

  37.   else

  38.   {

  39.       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //IE6及以下

  40.   }


  42.   //2.连接数据库open(传输方法，文件名或路径，同步false或异步传输true)            

  43.   oAjax.open("POST",url,true)


  45.   //3.发送请求

  46.   oAjax.send(null);


  48.   //4.接收返回信息

  49.   oAjax.onreadystatechange=function()

  50.   {

  51.     //oAjax.readyState  //浏览器和服务器进行到哪一步

  52.     //0 请求未初始化，还未开始调用open()方法

  53.     //1 载入(请求已提出)，已调用open()方法， 正在send()请求

  54.     //2 载入完成(请求已发送并处理中)，send方法完成，已收到全部响应内容载入的是原始数据，

  55.     //3 解析(请求处理中)，正在解析响应内容

  56.     //4 完成(请求已完成)，响应内容解析完成，可以在客户端调用了

  57.      if(oAjax.readyState==4)  //读取完成

  58.       {

  59.           if(oAjax.status >= 200 && oAjax.status<300) //|| oAjax.status==0  

  60.           //status属性包含里请求的HTTP状态，一般，任何200到299之间结果代码都代表成功

  61.           {

  62.                 fnSucc(oAjax.responseText);

  63.            }

  64.          else

  65.           {

  66.               if(fnFaild)

  67.               {

  68.                    fnFaild(oAjax.status);

  69.                }

  70.            }

  71.        }

  72.    }

  73. }

  74. </script>


index_m_ser.php 请求的URL页面：

  1. <?php

  2. echo "Ajax Success!";

  3. ?>


当在前台页面进行提交数据的时候，在Chrom和FF中访问，返回的数据均是“0”，但在IE中却正常返回

wKiom1L90LLyF9dgAAEOmVV9wlM019.jpg



wKiom1L90LPifH-0AAGPptRLtMY296.jpg


前人说可能是由于跨域原因，但我在操作时是没有跨域的，原因未知，不知哪位前辈知道为什么


此后，通过将提交按钮的submit类型更改为button类型，将form的submit事件转移至button事件上，Chrom、FF、IE上均成功返回结果。如下：


  1. <script type="text/javascript">

  2. window.onload = function()

  3. {

  4.   var oFrom_status = document.getElementById("from_status");

  5.   var oTextarea_status = document.getElementById("textarea_status");

  6.   var oSub_status = document.getElementById("sub_status");


  8. oSub_status.onclick = function()

  9.   {

  10.     if(oTextarea_status.value==""||oTextarea_status.value.length<=0)

  11.      {

  12.           alert("内容不可为空，请输入你要分享的内容！");

  13.           oTextarea_status.focus();

  14.           return false;

  15.      }

  16.     var oContents = oTextarea_status.value;

  17.     var url = "index_m_ser.php";

  19.     ajax(url, function(str_result){

  20.               alert("返回请求的数据："+ str_result);

  21.                 }, function(str){ alert("请求失败："+str);}

  22.          );

  23.   }

  24. }


  26. //Ajax函数

  27. function ajax(url,fnSucc, fnFaild)

  28. {

  29. //1.创建Ajax对象,

  30.   if(window.XMLHttpRequest)

  31.   {

  32.       var oAjax=new XMLHttpRequest();   //IE7+, Chrome, Firefox

  33.   }

  34.   else

  35.   {

  36.       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");   //IE6及以下

  37.   }


  39.   //2.连接数据库open(传输方法，文件名或路径，同步false或异步传输true)            

  40.   oAjax.open("POST",url,true)


  42.   //3.发送请求

  43.   oAjax.send(null);


  45.   //4.接收返回信息

  46.   oAjax.onreadystatechange=function()

  47.   {

  48.     //oAjax.readyState  //浏览器和服务器进行到哪一步

  49.     //0 请求未初始化，还未开始调用open()方法

  50.     //1 载入(请求已提出)，已调用open()方法， 正在send()请求

  51.     //2 载入完成(请求已发送并处理中)，send方法完成，已收到全部响应内容载入的是原始数据，

  52.     //3 解析(请求处理中)，正在解析响应内容

  53.     //4 完成(请求已完成)，响应内容解析完成，可以在客户端调用了

  54.     if(oAjax.readyState==4)  //读取完成

  55.     {

  56.         if(oAjax.status >= 200 && oAjax.status<300) //|| oAjax.status==0  

  57.          //status属性包含里请求的HTTP状态，一般，任何200到299之间结果代码都代表成功

  58.          {

  59.              fnSucc(oAjax.responseText);

  60.           }

  61.          else

  62.          {

  63.             if(fnFaild)

  64.             {

  65.                   fnFaild(oAjax.status);

  66.              }

  67.           }

  68.       }

  69.    }

  70. }

  71. </script>

  72. </head>


  74. <body>

  75.  <form action="" method="post" name="from_status" id="from_status">

  76. <textarea name="textarea" id="textarea_status"></textarea>

  77. <input type="button" value="提 交" name="sub_status" id="sub_status"/>

  78.  </form>

  79. </body>


如图：

wKiom1L91XXz9iF-AAEQWmV2yWc439.jpg


wKioL1L91VHC4hMcAAE6flgu13M430.jpg


wKiom1L91XbiPi-fAAFkxyXMgw4409.jpg


问题虽然暂时解决，但关于在使用submit提交处理中出现返回内容为“0”，且status为canceled，暂时无法理解，请前辈指点