WEB主题公园[www.themepark.com.cn]用心做最好的原创中文WordPress主题!

WordPress技术博客 news
您现在的位置:首页 > WordPress技术博客 > ajaxForm——最简单的ajax表单提交Jquery插件

本周推荐网站模板

WordPress主题视频教程

最近更新的WordPress主题
最新更新过的网站模板

ajaxForm——最简单的ajax表单提交Jquery插件

发布时间:2013/07/19 WordPress技术博客 wp应用技术 8923 0

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功?

网上有很多的方法实现这个功能,但是都比较复杂,这里小编推荐一款应该说是最简单易用的ajax表单提交插件,这款插件是Jquery插件,而非wordpress插件,这点请注意。

下载地址: http://malsup.github.com/jquery.form.js

表单插件API

首先你需要了解这款插件的主要方法:

ajaxForm
ajaxSubmit
formToArray
formSerialize

fieldSerialize
fieldValue
clearForm
clearFields
resetForm

 

这里我放出一段经过修改的示例:

注意这些类:

tishi2(覆盖整个表单的白色透明膜)默认隐藏  父级

tishi(一个现实成功提交的绿色小框)默认隐藏  子集

tishi3(一个蓝色的框,提示正在提交)默认不隐藏,继承父级的隐藏属性   子集

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$('#submit').click(function() { //When trigger is clicked...

$('.tishi2').fadeIn('500');
});  //设置按钮下,立即现实tishi2,显示白色的膜和tishi3正在提交中
//设置
var options = {

success: function() {
$(this).ajaxSubmit();
$('.tishi').fadeIn('500');
setTimeout("$('.tishi2').fadeOut('slow')",3000);
setTimeout("$('.tishi').fadeOut('slow')",3000);

},    //这里我设置成功之后的条件,显示tishi(提交成功)遮住tishi3,三秒之后,整个大的tishi消失
error: function() {
$('.tishi2').fadeOut('slow');
alert("填写错误,重新填写!"); return false;

} 如果填写错误,输出错误提示框   tishi2消失。
};

$('#commentform').ajaxForm(options);

//这里的一句话就是让你的表单进行ajax提交,是不是很简单呢?  #commentform   就是你的表ID   设置对了就OK啦

});
</script>

下面看看具体的效果:
8193851

93826

如何,这样的效果很酷把~任何网页的任何表单都能用这个来实现哦~

下面介绍一下具体的参数:

ajaxForm()

增加所有需要的事件监听器,为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中,使用 ajaxForm来为AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options 对象。
可链接(Chainable):可以。

实例:

$('#myFormId').ajaxForm();

ajaxSubmit()

马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):可以。

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:null。

url

指定提交表单数据的URL。
默认值:表单的action属性值

type

指定提交表单数据的方法(method):“GET”或“POST”。
默认值:表单的method属性值(如果没有找到默认为“GET”)。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数 据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据:

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

默认值:null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值:null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持:

'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。

'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。

'script':如果dataType == 'script', 服务器响应将求值成纯文本。

默认值:null(服务器返回responseText值)

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布尔标志,表示数据是否必须严格按照语义顺序(slower?)来进行提交。注意:一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了 type="image"的input元素。如果你的服务器有严格的语义要求,以及表单中包含有一个type="image"的input元素,就应该将 semantic设置为true。(译注:这一段由于无法理解,翻译出来可能语不达意,但请达人指正。)
默认值:false

resetForm

布尔标志,表示如果表单提交成功是否进行重置。
Default value: null

clearForm

布尔标志,表示如果表单提交成功是否清除表单数据。
默认值:null

赶快试一下把~ 希望本文对你有所帮助!

 

WordPress原创主题,高端网站模板建站,网站模板建站资源以及开发知识分享,尽在WEB主题公园

如未标明出处,所有文章均为WEB主题公园原创,如需转载,请附上原文地址,感谢您的支持和关注。

============关于WEB主题公园=============

WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板,并提供全程视频教程,让您能够轻松的使用网站模板建立好自己的网站!

分享WordPress开发,网站维护经验,分享更多有用的WordPress知识

WEB主题公园--做最好的中文原创WordPress主题,网站模版。