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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了关于在form中通过ajax请求传递数据时出现异常的问题，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

default_ajax.PHP前端页面：@H_403_3@

  1. <body>@H_403_3@@H_403_10@

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

  3. <textarea name="textarea" id="textarea_status"></textarea>@H_403_3@@H_403_10@

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

  5. </form>@H_403_3@@H_403_10@

  6. </body>@H_403_3@


    @H_403_3@


    @H_403_3@


    @H_403_3@@H_403_10@

页面JS块：@H_403_3@

  1. <script type="text/javascript">@H_403_3@@H_403_10@

  2. window.onload = function()@H_403_3@@H_403_10@

  3. {@H_403_3@@H_403_10@

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

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

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


  7. @H_403_3@@H_403_10@

  8. oFrom_status.onsubmit = function()@H_403_3@@H_403_10@

  9. {@H_403_3@@H_403_10@

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

  11. {@H_403_3@@H_403_10@

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

  13. oTextarea_status.focus();@H_403_3@@H_403_10@

  14. return false;@H_403_3@@H_403_10@

  15. }@H_403_3@@H_403_10@


  16. @H_403_3@@H_403_10@

  17. @H_403_3@@H_403_10@

  18. var oContents = oTextarea_status.value;@H_403_3@@H_403_10@

  19. var url = "index_m_ser.PHP";@H_403_3@@H_403_10@


  20. @H_403_3@@H_403_10@

  21. @H_403_3@@H_403_10@

  22. ajax(url,function(str_result){ @H_403_3@@H_403_10@

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

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

  25. );@H_403_3@@H_403_10@

  26. }@H_403_3@@H_403_10@

  27. }@H_403_3@@H_403_10@


  28. @H_403_3@@H_403_10@

  29. //Ajax函数@H_403_3@@H_403_10@

  30. function ajax(url,fnSucc,fnFaild)@H_403_3@@H_403_10@

  31. {@H_403_3@@H_403_10@

  32. //1.创建Ajax对象,@H_403_3@@H_403_10@

  33. if(window.XMLHttpRequest) @H_403_3@@H_403_10@

  34. {@H_403_3@@H_403_10@

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

  36. }@H_403_3@@H_403_10@

  37. else @H_403_3@@H_403_10@

  38. {@H_403_3@@H_403_10@

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

  40. }@H_403_3@@H_403_10@


  41. @H_403_3@@H_403_10@

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

  43. oAjax.open("POST",url,true)@H_403_3@@H_403_10@


  44. @H_403_3@@H_403_10@

  45. //3.发送请求@H_403_3@@H_403_10@

  46. oAjax.send(null);@H_403_3@@H_403_10@


  47. @H_403_3@@H_403_10@

  48. //4.接收返回信息@H_403_3@@H_403_10@

  49. oAjax.onreadystatechange=function()@H_403_3@@H_403_10@

  50. {@H_403_3@@H_403_10@

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

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

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

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

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

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

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

  58. {@H_403_3@@H_403_10@

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

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

  61. {@H_403_3@@H_403_10@

  62. fnSucc(oAjax.responseText);@H_403_3@@H_403_10@

  63. }@H_403_3@@H_403_10@

  64. else@H_403_3@@H_403_10@

  65. {@H_403_3@@H_403_10@

  66. if(fnFaild)@H_403_3@@H_403_10@

  67. {@H_403_3@@H_403_10@

  68. fnFaild(oAjax.status); @H_403_3@@H_403_10@

  69. }@H_403_3@@H_403_10@

  70. }@H_403_3@@H_403_10@

  71. }@H_403_3@@H_403_10@

  72. } @H_403_3@@H_403_10@

  73. }@H_403_3@@H_403_10@

  74. </script>@H_403_3@@H_403_10@


@H_403_3@

index_m_ser.PHP 请求的URL页面：@H_403_3@

  1. <?PHP@H_403_3@@H_403_10@

  2. echo "Ajax Success!";@H_403_3@@H_403_10@

  3. ?>@H_403_3@@H_403_10@


@H_403_3@

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

wKiom1L90LLyF9dgAAEOmVV9wlM019.jpg

@H_403_3@


@H_403_3@


@H_403_3@

wKiom1L90LPifH-0AAGPptRLtMY296.jpg

@H_403_3@


@H_403_3@

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


@H_403_3@

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


@H_403_3@

  1. <script type="text/javascript">@H_403_3@@H_403_10@

  2. window.onload = function()@H_403_3@@H_403_10@

  3. {@H_403_3@@H_403_10@

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

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

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


  7. @H_403_3@@H_403_10@

  8. oSub_status.onclick = function()@H_403_3@@H_403_10@

  9. {@H_403_3@@H_403_10@

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

  11. {@H_403_3@@H_403_10@

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

  13. oTextarea_status.focus();@H_403_3@@H_403_10@

  14. return false;@H_403_3@@H_403_10@

  15. }@H_403_3@@H_403_10@

  16. var oContents = oTextarea_status.value;@H_403_3@@H_403_10@

  17. var url = "index_m_ser.PHP";@H_403_3@@H_403_10@

  18. @H_403_3@@H_403_10@

  19. ajax(url,function(str_result){ @H_403_3@@H_403_10@

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

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

  22. );@H_403_3@@H_403_10@

  23. }@H_403_3@@H_403_10@

  24. }@H_403_3@@H_403_10@


  25. @H_403_3@@H_403_10@

  26. //Ajax函数@H_403_3@@H_403_10@

  27. function ajax(url,true)@H_403_3@@H_403_10@


  28. @H_403_3@@H_403_10@

  29. //3.发送请求@H_403_3@@H_403_10@

  30. oAjax.send(null);@H_403_3@@H_403_10@


  31. @H_403_3@@H_403_10@

  32. //4.接收返回信息@H_403_3@@H_403_10@

  33. oAjax.onreadystatechange=function()@H_403_3@@H_403_10@

  34. {@H_403_3@@H_403_10@

  35. //oAjax.readyState //浏览器和服务器进行到哪一步@H_403_3@@H_403_10@

  36. //0 请求未初始化，还未开始调用open()方法@H_403_3@@H_403_10@

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

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

  39. //3 解析(请求处理中)，正在解析响应内容@H_403_3@@H_403_10@

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

  41. if(oAjax.readyState==4) //读取完成@H_403_3@@H_403_10@

  42. {@H_403_3@@H_403_10@

  43. if(oAjax.status >= 200 && oAjax.status<300) //|| oAjax.status==0 @H_403_3@@H_403_10@

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

  45. {@H_403_3@@H_403_10@

  46. fnSucc(oAjax.responseText);@H_403_3@@H_403_10@

  47. }@H_403_3@@H_403_10@

  48. else@H_403_3@@H_403_10@

  49. {@H_403_3@@H_403_10@

  50. if(fnFaild)@H_403_3@@H_403_10@

  51. {@H_403_3@@H_403_10@

  52. fnFaild(oAjax.status); @H_403_3@@H_403_10@

  53. }@H_403_3@@H_403_10@

  54. }@H_403_3@@H_403_10@

  55. }@H_403_3@@H_403_10@

  56. } @H_403_3@@H_403_10@

  57. }@H_403_3@@H_403_10@

  58. </script>@H_403_3@@H_403_10@

  59. </head>@H_403_3@@H_403_10@


  60. @H_403_3@@H_403_10@

  61. <body>@H_403_3@@H_403_10@

  62. <form action="" method="post" name="from_status" id="from_status">@H_403_3@@H_403_10@

  63. <textarea name="textarea" id="textarea_status"></textarea>@H_403_3@@H_403_10@

  64. <input type="button" value="提 交" name="sub_status" id="sub_status"/>@H_403_3@@H_403_10@

  65. </form>@H_403_3@@H_403_10@

  66. </body>@H_403_3@@H_403_10@


@H_403_3@

如图：@H_403_3@

wKiom1L91XXz9iF-AAEQWmV2yWc439.jpg

@H_403_3@


@H_403_3@

wKioL1L91VHC4hMcAAE6flgu13M430.jpg

@H_403_3@


@H_403_3@

wKiom1L91XbiPi-fAAFkxyXMgw4409.jpg

@H_403_3@


@H_403_3@

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

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作