天天看点

jqury ajax 提交from conflict,JQuery中使用ajax提交表单遇到的问题

今天在做维护时,遇到一段JQuery旧代码,看得很纠结,大致结构如下:

html代码

....

javascript代码

$("#mySubmit").click(function(){

doSubmit();

});

//提交

function doSubmit(){

$("myForm").submit(function(){

$.post("abc.action?opID=testQry",

$("myForm").serialize(),

function(data){

alert(data);

//......

});

});

}

这段代码主要存在两个方面的问题:

1.表单有重复提交之嫌。

使用的按钮类型为submit

使用JQuery提交表单$("myForm").submit()

在上步JQuery提交的事件处理方法中还使用了ajax异步提交$.post()

2.传参的问题。

$.post()提交时参数opID出现重复。

首先看第一个问题,写JS代码的时候,这种重复提交的方式显然是很危险的,如果要使用异步提交表单,则干脆对代码作如下简化:

提交按钮修改为button类型

javascript进行简化:

$("#mySubmit").click(function(){

$.post("abc.action?opID=testQry",

$("myForm").serialize(),

function(data){

alert(data);

//......

});

});

这样就去掉了表单submit类型按钮的表单提交及JQuery中的$("myForm").submit方法提交,只保留了ajax这一种提交方式,使代码既简单易理解,也更安全。

第二个问题,其实承接第一个问题,由于参数在ajax提交时名称和值重复(url中 opID=testQry和 $("myForm").serialize() ),所以上面简化后的代码依然提交不了。需要将$.post()中的url参数 opID=testQry去掉,即可。