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


  25. //3.发送请求

  26. oAjax.send(null);


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

  28. oAjax.onreadystatechange=function()

  29. {

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

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

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

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

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

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

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

  37. {

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

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

  40. {

  41. fnSucc(oAjax.responseText);

  42. }

  43. else

  44. {

  45. if(fnFaild)

  46. {

  47. fnFaild(oAjax.status);

  48. }

  49. }

  50. }

  51. }

  52. }

  53. </script>

  54. </head>


  55. <body>

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

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

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

  59. </form>

  60. </body>


如图:

wKiom1L91XXz9iF-AAEQWmV2yWc439.jpg


wKioL1L91VHC4hMcAAE6flgu13M430.jpg


wKiom1L91XbiPi-fAAFkxyXMgw4409.jpg


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

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

  1. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

  2. HTML5表单验证特性(知识点小结)

    这篇文章主要介绍了HTML5表单验证特性的一些知识点,本文通过实例代码截图的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amazeui页面分析之登录页面的示例代码

    这篇文章主要介绍了amazeui页面分析之登录页面的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. ios – Swift Eureka Form中的循环

    我正在构建一个Eureka表单,并希望在表单中放置一个循环来构建基于数组的步进器列表.我试图使用的代码是:但是,当我这样做时,我在StepperRow行上出现了一个错误:所以看起来Swift不再认为它在形式之内并且正在关注

  5. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  6. swift 上传图片和参数 upload image with params

    Alamofire.upload(urlRequest.0,urlRequest.1).progress{(bytesWritten,totalBytesWritten,totalBytesExpectedToWrite)inprintln("\(totalBytesWritten)/\(totalBytesExpectedToWrite)")}}

  7. swift – 使用PostgreSQL在Vapor 3中上传图片

    我正在关注这些家伙MartinLasek教程,现在我正在“图片上传”.似乎没有人能回答“如何上传iVapor3图像”的问题Db连接正常,所有其他值都保存.这是我的创建方法:和型号:}和叶子模板:我知道需要一种管理文件的方法和原始图像字节,但我怎么去那里?这使用多部分表单的自动解码:upload.leaf文件是:使用File类型可以访问上载文件的本地文件名以及文件数据.如果将其余的Question字段添加到ExampleUpload结构中,则可以使用该路径捕获整个表单的字段.

  8. android – Phonegap本地构建 – jquery ajax错误:readystate 0 responsetext status 0 statustext error

    解决方法您是否在索引文件中包含了内容安全元标记?

  9. Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象

  10. Ajax跨域问题的解决办法汇总(推荐)

    本文给大家分享多种方法解决Ajax跨域问题,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部