jquery ajaxt提交在firefox,chrome下遇到的问题

0 0

jquery ajaxt提交在firefox,chrome下遇到的问题10

var str = $('#f1').formSerialize();

$.ajax({
type:'post',
url:'actionHRDemand.php',
data:str,
dataType:'json',
error:function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status+","+XMLHttpRequest.readyState+","+textStatus+","+errorThrown);
},
success:function(result){
if(result['num']==1){
jQuery("#jqgrid").trigger("reloadGrid")
}else{
alert('操作失敗');
}
}
});

以上代码在IE6.0中无问题,在firefox,chrome中,无法提交,页面重新加载了.用firebug调试可以看到str数据post到了当前页面,后台保存

失败.也就是说没有请求url:'actionHRDemand.php',而是请求的自身页面.百思不得其解.后尝试将async:false,数据可以提交后台保存,

但是当前页面任然重新加载.

我的form是这样的:<form name="f1" id="f1" action="" method="post" enctype="application/x-www-form-urlencoded">

如果在action中写入'actionHRDemand.php,页面则会跳转到'actionHRDemand.php页面.

我在当前页面中还使用了jqgrid插件,在加载时请求数据,是没有问题的但是执行以下代码:

//查询

function query(){

var accountid = $("#accountid").val();

var departid = $("#departid").val();

var proposerid = $('#proposerid').val();

var demandtime = $('#demandtime').val();

var position = $('#position').val();

var howmany = $('#howmany').val();

var matter = $('#matter').val();

if(isNaN(howmany)){

alert("請輸入正確的需求人數");

return;

}

$("#jqgrid").jqGrid('setGridParam',{

url:'actionHRDemand.php?op=grid', postData:{'accountid':accountid,'departid':departid,'proposerid':proposerid,'demandtime':demandtime,'position':position,'howmany':howmany,'matter':matter},

page:1

}).trigger("reloadGrid");

}

发生了同上面一样的问题,页面重载了.

似乎$(function(){});以外的ajax请求全都出问题了.

这个问题已经困扰了我好久,特地发出来请广大网友指点.

问题补充：谢谢各位,有两位朋友提到触发事件的按钮的问题,给我提供了思路,现问题已经解决.
做一下分享.
我原本的写法如下:
$("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; }); //阻止提交
})
此方法未经验证,只是一点想法.

有两位帮忙分析的朋友都提到了按钮事件的关键点,给我提供了思路,在此表示感谢!

问题补充：再补充,xingkongxieyang 朋友提到将button放到form之外,我没有试过,但是应该是可以的.我之前都是放在form之内的.此问题重点应该是firefox和chrome,IE之间对form内button事件的不同的问题,在此提醒大家注意.