快捷導(dǎo)航

詳解javascript表單的Ajax提交插件的使用

更新時(shí)間：2016年12月29日 08:35:28 作者：依然仰望

本文主要介紹了javascript表單的Ajax提交插件的使用，具有一定的參考價(jià)值。下面跟著小編一起來看下吧

Ajax 提交插件

form.js 表單的下載地址：官方網(wǎng)站：http://malsup.com/jquery/form/

form.js 插件有兩個(gè)核心方法：ajaxForm()和ajaxSubmit()，它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)行的功能。

//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
　　alert('提交成功！');
});

使用ajaxForm()方法，會(huì)直接實(shí)現(xiàn)ajax 提交。自動(dòng)阻止了默認(rèn)行為，而它提交的

默認(rèn)頁面是form 控件的action 屬性的值。提交的方式是method 屬性的值。

//ajaxSubmit()提交方式
$('#reg').submit(function () {
　　　　$(this).ajaxSubmit(function () {
　　　　alert('提交成功！');
　　});
　　return false;
});

注意：ajaxForm()方法，是針對(duì)form 直接提交的，所以阻止了默認(rèn)行為。而ajaxSubmit()方法，由于是針對(duì)submit()方法的，所以需要手動(dòng)阻止默認(rèn)行為。

option 參數(shù)

option 參數(shù)是一個(gè)以鍵值對(duì)傳遞的對(duì)象，可以通過這個(gè)對(duì)象，設(shè)置各種Ajax 提交的功能。

$('#reg').submit(function () {
　　$(this).ajaxSubmit({
　　　　url : 'test.php', //設(shè)置提交的url，可覆蓋action 屬性
　　　　target : '#box', //服務(wù)器返回的內(nèi)容存放在#box 里
　　　　type : 'POST', //GET,POST
　　　　dataType : null, //xml,json,script，默認(rèn)為null
　　　　clearForm : true, //成功提交后，清空表單
　　　　resetForm : true, //成功提交后，重置表單
　　　　data : { //增加額外的數(shù)據(jù)提交
　　　　aaa : 'bbb',
　　　　ccc : 'ddd'.
　　},
　　beforeSubmit : function (formData, jqForm, options) {
　　　　alert(formData[0].name); //得到傳遞表單元素的name
　　　　alert(formData[0].value); //得到傳遞表單元素的value
　　　　alert(jqForm); //得到form 的jquery 對(duì)象
　　　　alert(options); //得到目前options 設(shè)置的屬性
　　　　alert('正在提交中?。?！');
　　　　return true;
　　},
　　success : function (responseText, statusText) {
　　　　alert(responseText + statusText); //成功后回調(diào)
　　},
　　error : function (event, errorText, errorType) { //錯(cuò)誤時(shí)調(diào)用
　　　　　alert(errorText + errorType);
　　　　},
　　});
　　return false;
});

工具方法

//表單序列化
alert($('#reg').formSerialize());
//序列化某一個(gè)字段
alert($('#reg #user').fieldSerialize());
//得到某個(gè)字段的value 值
alert($('#reg #user').fieldValue());
//重置表單
$('#reg').resetForm()

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: