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

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

default_ajax.PHP前端页面：

<body>
<form action="" method="post" name="from_status" id="from_status">
<textarea name="textarea" id="textarea_status"></textarea>
<input type="submit" value="提交" name="sub_status" id="sub_status"/>
</form>
</body>

页面JS块：

<script type="text/javascript">
window.onload = function()
{
var oFrom_status = document.getElementById("from_status");
var oTextarea_status = document.getElementById("textarea_status");
var oSub_status = document.getElementById("sub_status");
oFrom_status.onsubmit = function()
{
if(oTextarea_status.value==""||oTextarea_status.value.length<=0)
{
alert("内容不可为空，请输入你要分享的内容！");
oTextarea_status.focus();
return false;
}
var oContents = oTextarea_status.value;
var url = "index_m_ser.PHP";
ajax(url,function(str_result){
alert("返回请求的数据："+ str_result);
},function(str){ alert("请求失败："+str);}
);
}
}
//Ajax函数
function ajax(url,fnSucc,fnFaild)
{
//1.创建Ajax对象,
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest(); //IE7+,Chrome,Firefox
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //IE6及以下
}
//2.连接数据库open(传输方法，文件名或路径，同步false或异步传输true)
oAjax.open("POST",url,true)
//3.发送请求
oAjax.send(null);
//4.接收返回信息
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器进行到哪一步
//0 请求未初始化，还未开始调用open()方法
//1 载入(请求已提出)，已调用open()方法，正在send()请求
//2 载入完成(请求已发送并处理中)，send方法完成，已收到全部响应内容载入的是原始数据，
//3 解析(请求处理中)，正在解析响应内容
//4 完成(请求已完成)，响应内容解析完成，可以在客户端调用了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status >= 200 && oAjax.status<300) //|| oAjax.status==0
//status属性包含里请求的HTTP状态，一般，任何200到299之间结果代码都代表成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
}
}
</script>

index_m_ser.PHP 请求的URL页面：

<?PHP
echo "Ajax Success!";
?>

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

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

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

<script type="text/javascript">
window.onload = function()
{
var oFrom_status = document.getElementById("from_status");
var oTextarea_status = document.getElementById("textarea_status");
var oSub_status = document.getElementById("sub_status");
oSub_status.onclick = function()
{
if(oTextarea_status.value==""||oTextarea_status.value.length<=0)
{
alert("内容不可为空，请输入你要分享的内容！");
oTextarea_status.focus();
return false;
}
var oContents = oTextarea_status.value;
var url = "index_m_ser.PHP";
ajax(url,function(str_result){
alert("返回请求的数据："+ str_result);
},function(str){ alert("请求失败："+str);}
);
}
}
//Ajax函数
function ajax(url,true)
//3.发送请求
oAjax.send(null);
//4.接收返回信息
oAjax.onreadystatechange=function()
{
//oAjax.readyState //浏览器和服务器进行到哪一步
//0 请求未初始化，还未开始调用open()方法
//1 载入(请求已提出)，已调用open()方法，正在send()请求
//2 载入完成(请求已发送并处理中)，send方法完成，已收到全部响应内容载入的是原始数据，
//3 解析(请求处理中)，正在解析响应内容
//4 完成(请求已完成)，响应内容解析完成，可以在客户端调用了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status >= 200 && oAjax.status<300) //|| oAjax.status==0
//status属性包含里请求的HTTP状态，一般，任何200到299之间结果代码都代表成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
}
}
</script>
</head>
<body>
<form action="" method="post" name="from_status" id="from_status">
<textarea name="textarea" id="textarea_status"></textarea>
<input type="button" value="提交" name="sub_status" id="sub_status"/>
</form>
</body>

如图：

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

原文链接：https://www.f2er.com/ajax/165265.html

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

猜你在找的Ajax相关文章