首页 > php,JavaScript,IOS开发 > ajax获取提交表单返回值(4)- Firefox,safari不识别post

ajax获取提交表单返回值(4)- Firefox,safari不识别post

《ajax获取提交表单返回值(3)- 405 Not Allowed》中的代码在chrome中运行无碍,但是在火狐中运行的时候发现没有任何反应。

research的几个相关点:

相关点1:
在IE中运行完好的AJAX,在火狐下没有反应。断点检查时,发现在xmlHTTP.setRequestHeader("content-type","记不清了,是一个POST方法必须用到的头部")之前,都可以运行,这个之后就没反应了。如果是因为创建XMLHTTP不兼容FF的原因,求一个可以兼容FF的XMLHTTP创建程序。如果不是的话,请问各位是什么原因导致的?程序不在手里,所以贴不上来,但程序在IE下运行完全可以

对于$.ajax返回值,IE和FF的默认值不同,IE默认为html格式,ff为 xmldocument,在未指定的情况下,IE返回字符串,而FF返回document对象。在回调函数后增加 返回数据类型即可,设置为 text或者html就行。

修改后的JS方法如下:

$.post("${ctx}/password/validateMail", {
            account : $("#account").val(),
            email : $("#email").val(),
            randomImg : $("#randomImg").val()
        }, function(data) {
            alert("Data Loaded: " + data);
        }, "html");

相关点2:
错误:在ie下提交没有问题,但是firefox或者chrome下提交就不成功,找了N多网站,终于找到原因了,
“分析下来,如果button被firefox,chrome视为submit,就可以合理解释出现的问题了.
button的onclick事件和submit同时触发,ajax发出请求后(默认异步提交),submit事件终止了ajax的请求,因此,在chrome的开发人员工具里面可以看到这一奇怪的现象,status是cancled,type是pending(正常应该是text/html或其他)”

相关点3:
经过反复测试发现:原来是因为发送了正确的ajax请求,但是请求还没有发送出去就已经刷新的当前的页面。

解决办法:1、将刷新页面的请求放在回调函数中运行。2、发送的ajax请求改为同步请求。

function abc() {  
    $.ajax({  
        type: "POST",  
        url: "${pageContext.request.contextPath}/appManager/delAction.do",  
        dataType: "json",  
        data: "appid=" + appid,  
        success: function(msg) {  
            alert(msg);  
            window.location.reload();  
        }  
    });  
}  

相关点4:

$("button" ).button();
<button id="" onclick="savedata();">確認</button>
<button id="" onclick="$('#f1').resetForm();">重置</button>
<button id="" onclick="query();">搜索</button>
无论如何在firefox下,chrome下都不可以,修改后如下:
$("input:button" ).button();
<input type="button" id="" onclick="savedata();" value="確認" />
<input type="button" id="" onclick="$('#f1').resetForm();" value="重置"/>
<input type="button" id="" onclick="query();" value="搜索"/>
问题解决了.
因为我对jquery的了解只限于使用,我将出现这个问题的思考了一遍后,发现了问题所在:
1.firefox,chrome两个浏览器,是否将<button></button>视同<input type="submit">?
2.firefox,chrome将form内的button视为submit?
3.jquery的$("button" ).button();只是用来美化按钮,还是同时改变了button的type?我想这个可能性比较小.
分析下来,如果button被firefox,chrome视为submit,就可以合理解释出现的问题了.
button的onclick事件和submit同时触发,ajax发出请求后(默认异步提交),submit事件终止了ajax的请求,因此,在chrome的开发人员工具里面可以看到这一奇怪的现象,status是cancled,type是pending(正常应该是text/html或其他).这也是为什么我之前说,把ajax设为同步提交(async:false)时,数据提交后执行正确,但还会重载页面的问题.因为同步提交时,会锁定浏览器的其他操作,待完成后,才会执行submit事件.
虽然说的比较乱,但是到这里,大家应该都明白了.
解决的方法就是我上面所写的,把button改为input.
还有一个方法,就是阻止submit事件,可以这样做:
$(function(){
   $("form").bind("submit", function() { return false; }); //阻止提交
})
此方法未经验证,只是一点想法. 

相关点5:

提到将button放到form之外,我没有试过,但是应该是可以的.我之前都是放在form之内的.此问题重点应该是firefox和chrome,IE之间对form内button事件的不同的问题

综上,最终代码为:

<script src="jquery-1.11.1.min.js"> 
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
    var queryString = $('#ddd').serialize();
  $.post("../test/login.php",queryString,
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
    return false;
  },"html");
});
});

</script>

</head>

<body>



<form id=ddd method=get>
<input type="text" name="usrname" />
<input type="text" name="email" />
<input type="text" name="mbphone" />
<input type="text" name="passwd" />
<input type="text" name="type" value="0" />
<input type="text" name="extid" />
</form>
<button>subimt</button>
</body>

上一篇: ajax获取提交表单返回值(3)- 405 Not Allowed

下一篇: PHP中if语句5种写法