关于在form中通过ajax请求传递数据时出现异常的问题

   最近遇到了一个关于在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");


  7.   oFrom_status.onsubmit = function()

  8.   {

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

  10.       {

  11.           alert("内容不可为空,请输入你要分享的内容!");

  12.           oTextarea_status.focus();

  13.           return false;

  14.        }


  15.       var oContents = oTextarea_status.value;

  16.       var url = "index_m_ser.php";


  17.       ajax(url, function(str_result){

  18.                              alert("返回请求的数据:"+ str_result);

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

  20.             );

  21.    }

  22. }


  23. //Ajax函数

  24. function ajax(url,fnSucc, fnFaild)

  25. {

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

  27.   if(window.XMLHttpRequest)

  28.   {

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

  30.   }

  31.   else

  32.   {

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

  34.   }


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

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


  37.   //3.发送请求

  38.   oAjax.send(null);


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

  40.   oAjax.onreadystatechange=function()

  41.   {

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

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

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

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

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

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

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

  49.       {

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

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

  52.           {

  53.                 fnSucc(oAjax.responseText);

  54.            }

  55.          else

  56.           {

  57.               if(fnFaild)

  58.               {

  59.                    fnFaild(oAjax.status);

  60.                }

  61.            }

  62.        }

  63.    }

  64. }

  65. </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");


  7. oSub_status.onclick = function()

  8.   {

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

  10.      {

  11.           alert("内容不可为空,请输入你要分享的内容!");

  12.           oTextarea_status.focus();

  13.           return false;

  14.      }

  15.     var oContents = oTextarea_status.value;

  16.     var url = "index_m_ser.php";

  17.     ajax(url, function(str_result){

  18.               alert("返回请求的数据:"+ str_result);

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

  20.          );

  21.   }

  22. }


  23. //Ajax函数

  24. function ajax(url,fnSucc, fnFaild)

  25. {

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

  27.   if(window.XMLHttpRequest)

  28.   {

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

  30.   }

  31.   else

  32.   {

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

  34.   }


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

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


  37.   //3.发送请求

  38.   oAjax.send(null);


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

  40.   oAjax.onreadystatechange=function()

  41.   {

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

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

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

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

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

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

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

  49.     {

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

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

  52.          {

  53.              fnSucc(oAjax.responseText);

  54.           }

  55.          else

  56.          {

  57.             if(fnFaild)

  58.             {

  59.                   fnFaild(oAjax.status);

  60.              }

  61.           }

  62.       }

  63.    }

  64. }

  65. </script>

  66. </head>


  67. <body>

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

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

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

  71.  </form>

  72. </body>


如图:

wKiom1L91XXz9iF-AAEQWmV2yWc439.jpg


wKioL1L91VHC4hMcAAE6flgu13M430.jpg


wKiom1L91XbiPi-fAAFkxyXMgw4409.jpg


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

你可能感兴趣的:(Ajax,form)