JQuery.form.js异步提交表单

最新推荐文章于 2019-09-17 14:11:00 发布

G_Q_L

最新推荐文章于 2019-09-17 14:11:00 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： javascript 表单异步

本文链接：https://blog.youkuaiyun.com/G_Q_L/article/details/79268307

WEB前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了异步提交表单的技术细节，包括如何避免表单的二次提交问题，使用JQuery.form.js插件实现表单验证及异步提交的最佳实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步提交表单的问题：

异步提交表单时，如果点击了type=submit的Button或input后，form是会二次提交的，第一次是异步提交的，第二次表单自身仍会提交，这就造成了异步提交操作异常。

想要解决二次提交问题，那就要把Button和input的type换成button，给他添加click事件，然后异步提交到服务器，由于没有触发表单的submit事件所以解决了表单的二次提交问题，但是这会产生另一个问题——由于没有触发submit事件，所以表单验证不会触发，这就需要我们手动进行表单验证，否则数据不经验证就提交到服务器会产生异常。

异步提交表单最好的方式是使用JQuery.form.js插件，它会替换掉默认的submit事件，当点击submit按钮后表单会触发验证，但是不会二次提交。

$().ajaxForm()和$().ajaxSubmit()的区别：

ajaxForm使用的时候必须要有submit按钮；而ajaxSubmit则可以是任何元素的click事件。
要想触发表单的验证事件则必须要触发submit事件，使用ajaxSubmit是不会触发表单的验证事件的，所以最好使用ajaxForm。
但是必须清楚ajaxForm依赖于表单的[type=submit]，如果没有触发submit事件，ajaxForm是没有任何效果的。
异步提交时，如果不想点击submit按钮，但是又为了实现表单的验证，那么可以使用一个div将submit按钮包裹起来，然后设置div的display为none，之后在submit按钮的click事件中定义异步提交的方法，之后在想异步提交的时候调用submit按钮的click()方法。这样表单会触发验证，同时ajaxForm会阻止表单的自动提交，转而进行异步提交。如此一来，表单验证和异步提交的问题就完美解决了。

$().resetForm() : 重置表单

$().clearForm() : 清空表单

JQuery.form.js

//异步提交参数信息

var options={

target : '#output', // 把服务器返回的内容放入id为output的元素中

beforeSubmit : showRequest, // 提交前的回调函数

success : showResponse, // 提交后的回调函数

// url : url, //默认是form的action，如果申明，则会覆盖

// type : type, // 默认值是form的method("GET" or "POST")，如果声明，则会覆盖

// dataType : null, // html（默认）、xml、script、json接受服务器端返回的类型

// clearForm : true, // 成功提交后，清除所有表单元素的值

// resetForm : true, // 成功提交后，重置所有表单元素的值

timeout : 3000 // 限制请求的时间，当请求大于3秒后，跳出请求

}

function showRequest(formData, jqForm, options){

// formData: 数组对象，提交表单时，form插件会以ajax方式自动提交这些数据，格式如[{name:user,value:val},{name:pwd,value:pwd}]

// jqForm: jQuery对象，封装了表单的元素

// options: options对象

var queryString=$.param(formData); // name=1&address=2

var formElement=jqForm[0]; // 将jqForm转换为DOM对象

var address=formElement.address.value; // 访问jqForm的DOM元素

return true; // 只要不返回false，表单都会提交，在这里可以对表单元素进行验证

}

function showResponse(responseText,statusText){

// dataType=xml

var name=$("name",responseXML).text();

var address=$("address",responseXML).text();

$("#xmlout").html(name+" "+address);

// dataType=json

$("#jsonout").html(data.name+" "+data.address);

}

示例：

</form>

var myData = {

"CnName": "GQL",

"EnName":"Coker"

};

$(function () {

var ajaxFormOption = {

type: "post", //提交方式

dataType: "json", //数据类型

data: myData,//自定义数据参数，视情况添加

url: "TestHandler.ashx?type=ajaxForm", //请求url

success: function (data) { //提交成功的回调函数

document.write("success");

}

};

//form中有submit按钮——方式1

$("#form1").ajaxForm(ajaxFormOption);

//form中有submit按钮——方式2

$("#form1").submit(function () {

$(this).ajaxSubmit(ajaxFormOption);

return false;

});

//不需要submit按钮，可以是任何元素的click事件

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

$("#form1").ajaxSubmit(ajaxFormOption);

return false;

});

</script>

示例2：

//需要提交的表单

</div>

</div>

</div>

</div>

</form>

//表单submit按钮点击事件

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

var options = {

url: "../Handlers/AddRiskSettingHandler.ashx",

type: 'post',

success: function (_res) {

if (_res == 'ok') {

layer.closeAll();

layer.msg("添加成功");

$("#AddRiskForm").resetForm();

} else {

layer.msg("操作失败,请检查输入的参数信息");

}

riskSettingTableIns.reload();

}

};

$("#AddRiskForm").ajaxForm(options);

});

//在需要异步提交的时候，调用submit按钮的click()事件

function OpenRiskAdd() {

layer.open({

type: 1,

title: '添加Risk设置',

area: ['400px', '500px'],

content: $('#addRisk'),

btn: ['确定', '取消'],

yes: function () {

$("#sub_riskadd").click();

btn2: function () {

layer.close();

}

});

}