最近遇到了一个关于在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,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>
</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,暂时无法理解,请前辈指点