这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 javascript 表单的 Ajax 提交插件的使用,具有一定的参考价值。下面跟着小编一起来看下吧
Ajax 提交插件
form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/
form.js 插件有两个核心方法:ajaxForm() 和 ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能。
- //ajaxForm 提交方式
- $('#reg').ajaxForm(function () {
- alert('提交成功!');
- });
使用 ajaxForm() 方法,会直接实现 ajax 提交。自动阻止了默认行为,而它提交的
默认页面是 form 控件的 action 属性的值。提交的方式是 method 属性的值。
- //ajaxSubmit()提交方式
- $('#reg').submit(function () {
- $(this).ajaxSubmit(function () {
- alert('提交成功!');
- });
- return false;
- });
注意:ajaxForm() 方法,是针对 form 直接提交的,所以阻止了默认行为。而 ajaxSubmit() 方法,由于是针对 submit() 方法的,所以需要手动阻止默认行为。
option 参数
option 参数是一个以键值对传递的对象,可以通过这个对象,设置各种 Ajax 提交的功能。
- $('#reg').submit(function() {$(this).ajaxSubmit({url: 'test.php',
- //设置提交的url,可覆盖action 属性
- target: '#box',
- //服务器返回的内容存放在#box 里
- type: 'POST',
- //GET,POST
- dataType: null,
- //xml,json,script,默认为null
- clearForm: true,
- //成功提交后,清空表单
- resetForm: true,
- //成功提交后,重置表单
- data: { //增加额外的数据提交
- aaa: 'bbb',
- ccc: 'ddd'.
- },
- beforeSubmit: function(formData, jqForm, options) {alert(formData[0].name); //得到传递表单元素的name
- alert(formData[0].value); //得到传递表单元素的value
- alert(jqForm); //得到form 的jquery 对象
- alert(options); //得到目前options 设置的属性
- alert('正在提交中!!!');
- return true;
- },
- success: function(responseText, statusText) {alert(responseText + statusText); //成功后回调
- },
- error: function(event, errorText, errorType) { //错误时调用
- alert(errorText + errorType);
- },
- });
- return false;
- });
工具方法
- //表单序列化
- alert($('#reg').formSerialize());
- //序列化某一个字段
- alert($('#reg #user').fieldSerialize());
- //得到某个字段的value 值
- alert($('#reg #user').fieldValue());
- //重置表单
- $('#reg').resetForm()
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0516/329045.html