JQuery AJAX 的表单提交

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。


jQuery Form 有两个核心的方法--ajaxForm()和ajaxSubmit(),他们集合了从控制表单元素到决定如何管理提交进程的功能。

可接受参数: options对象,

var options = {

  target: ' ID或class',

  beforeSubmit:  showRequest,  //提交前回调函数

  success:  showResponse,  //提交后回调函数

  url: url,  //默认为form表单的action

  type: type,   //默认是form表单的method

  dataType:  null,  //服务端返回的数据类型(xml或json)

  clearForm:  true,  //成功提交后,清除表单的值

  resetForm:  true,  //成功提交后,重置表单的值

  timeout:  1000  //设置请求时间的限制,单位是毫秒ms,大于则跳出请求

};


参数传递到ajaxForm() --> $('表单的ID').ajaxForm(options);

参数传递到ajaxSubmit() --> $('表单的ID').ajaxSubmit( function () {

  $(this).ajaxSubmit(options);

  return false;

} );


表单提交之前验证表单


大多数情况下,需要在表单提交之前对表单元素的值进行一次验证,如果不符合验证规则,就应该阻止表单的提交。

  首先,定义一个validate函数,把它设置为beforeSubmit的值。

  function validate (formData, jqForm, options) {

    // TODO

    var queryString = $.param( formData );

    return true;

}


Form 插件获取表单数据的三种方式:

1. 利用参数 formData,遍历 formData 的value值, 为空时返回false阻止表单的提交。


2. 利用参数 jqForm, 先把jqForm 转为DOM对象  var form = jqForm[0];

    然后通过form.name.value 来获取用户名的值。


3. 利用fieldValue() 方法, 例如: var username = $( 'input[ name = name ]' ).fieldValue();


  使用jQuery Form插件能够容易地把一个传统的表单提交的方式改变为Ajax提交方式,这是最简便简单的方法。


猜你喜欢

转载自blog.csdn.net/qq_38021852/article/details/81005316