本文摘自PHP中文网,作者Guanhui,侵删。
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
下载地址: http://malsup.com/jquery/form/#download
核心方法 -- ajaxForm() 和 ajaxSubmit()
1 2 3 4 5 6 7 8 9 10 | $( '#myForm' ).ajaxForm( function () {
$( '#output1' ).html( "提交成功!欢迎下次再来!" ).show();
});
$( '#myForm2' ).submit( function () {
$( this ).ajaxSubmit( function () {
$( '#output2' ).html( "提交成功!欢迎下次再来!" ).show();
});
return false ;
});
|
通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交方式
ajaxForm() 和 ajaxSubmit() 都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | var options = {
target: '#output' ,
beforeSubmit: showRequest,
success: showResponse,
timeout: 3000
}
function showRequest(formData, jqForm, options){
var queryString = $.param(formData);
var formElement = jqForm[0];
var address = formElement.address.value;
return true ;
};
function showResponse(responseText, statusText){
var name = $( 'name' , responseXML).text();
var address = $( 'address' , responseXML).text();
$( "#xmlout" ).html(name + " " + address);
$( "#jsonout" ).html(data.name + " " + data.address);
};
$( "#myForm" ).ajaxForm(options);
$( "#myForm2" ).submit(funtion(){
$( this ).ajaxSubmit(options);
return false ;
});
|
表单提交之前进行验证: beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | beforeSubmit: validate
function validate(formData, jqForm, options) {
for ( var i=0; i < formData.length; i++) {
if (!formData[i].value) {
alert( '用户名,地址和自我介绍都不能为空!' );
return false ;
}
}
var form = jqForm[0];
if (!form.name.value || !form.address.value) {
alert( '用户名和地址不能为空,自我介绍可以为空!' );
return false ;
}
var usernameValue = $( 'input[name=name]' ).fieldValue();
var addressValue = $( 'input[name=address]' ).fieldValue();
if (!usernameValue[0] || !addressValue[0]) {
alert( '用户名和地址不能为空,自我介绍可以为空!' );
return false ;
}
var queryString = $.param(formData);
return true ;
}
|
推荐教程:《JS教程》
以上就是jQuery表单插件jquery.form.js的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
jquery设置disabled属性与移除disabled属性
jquery $.post方法不执行怎么办
jquery如何判断是否是数组元素
jquery如何让select不可用
jquery怎么遍历json数组
带你轻松理解kmp算法
聊聊css 与 js 是如何阻塞 dom 解析和渲染的
jquery和ajax的区别是什么
javascript如何获取焦点和失去焦点
jquery如何给p标签赋值
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jQuery表单插件jquery.form.js