详解javascript表单的Ajax提交插件的使用

 更新时间:2016年12月29日 08:35:28   作者:依然仰望  
本文主要介绍了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()

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • JavaScript中valueOf函数与toString方法深入理解

    JavaScript中valueOf函数与toString方法深入理解

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外。它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下
    2012-12-12
  • 文本框只能输入数字的js代码(含小数点)

    文本框只能输入数字的js代码(含小数点)

    下面小编就为大家带来一篇文本框只能输入数字的js代码(含小数点)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript中sort() 方法使用详解

    javascript中sort() 方法使用详解

    sort()方法主要是用于对数组进行排序,默认情况下该方法是将数组元素转换成字符串,然后按照ASC码进行排序,这个大家都能理解,但如果数组元素是一个Object呢,转不了字符串,难道不能进行排序?答案当然是否定的,那么我们就来详细探讨下sort()方法的使用
    2015-08-08
  • JS中的继承操作实例总结

    JS中的继承操作实例总结

    这篇文章主要介绍了JS中的继承操作,结合实例形式总结分析了JS中的原型链继承、构造函数继承、组合继承、class继承等常见继承操作实现技巧,需要的朋友可以参考下
    2020-06-06
  • javascript获取dom的下一个节点方法

    javascript获取dom的下一个节点方法

    这篇文章主要介绍了javascript获取dom的下一个节点方法,实现在页面点击加减按钮数字的累加,需要的朋友可以参考下
    2014-09-09
  • 用JavaScript实现类似于ListBox功能示例代码

    用JavaScript实现类似于ListBox功能示例代码

    这篇文章主要介绍了用JavaScript实现类似于ListBox功能,需要的朋友可以参考下
    2014-03-03
  • 详解JavaScript中原始数据类型Symbol的使用

    详解JavaScript中原始数据类型Symbol的使用

    Symbol是es6引入的一个新的原始数据类型,是一个独一无二的值。这篇文章主要为大家介绍了JavaScript中原始数据类型Symbol的使用,感兴趣的可以了解一下
    2023-02-02
  • ES6中定义类和对象的方法示例

    ES6中定义类和对象的方法示例

    这篇文章主要介绍了ES6中定义类和对象的方法,结合实例形式分析了ES6中类的定义、继承、静态方法、静态属性等相关操作技巧,需要的朋友可以参考下
    2019-07-07
  • JavaScript实现移动端轮播效果

    JavaScript实现移动端轮播效果

    这篇文章主要为大家详细介绍了JavaScript实现移动端轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响

    如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响

    如果要完整解决该缩放和布局问题,仍需适配,下面这篇文章主要给大家介绍了关于如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响,需要的朋友可以参考下
    2022-11-11

最新评论