jquery form插件简介-优快云博客

本文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/98590689

本文详细介绍了jQuery Form插件的使用方法，包括ajaxForm和ajaxSubmit两大核心功能，展示了如何简化表单数据获取与提交流程，适用于前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

jquery form插件能用来控制表单数据和表单提交，有个它后，不需要依次获取所有域值，可以直接获取表单的所有域值。它主要有ajaxForm、ajaxSubmit两个方法，ajaxForm不提交表单，只准备表单，点击提交按钮时才会提交；ajaxSubmit立刻提交表单。如果表单中有文件，也会被提交，如果浏览器支持XMLHttpRequest Level2，则是ajax提交，否则利用iframe提交。

对比

没有jquery form插件前，要依次获取所有输入域的值

var value1 = $("#input1").val();
//校验value1
var value2 =$("#input2").val();
//校验value2

使用jquery form插件

// 获取表单的所有键值对
$("#form").formSerialize();  //返回name1=v1&name2=v2的字符串

注意，jquery core也提供了form序列化的方法

$("form").serialize()

ajaxForm与ajaxSubmit

ajaxForm用法

ajaxForm不会提交表单，只准备数据，在点击提交按钮时，在提交。它接受单个参数，回调函数或者options对象。

$(function(){
       var options={
	      beforeSubmit:function(){
	     }
	     };
	     //点击提交按钮时，才提交
       $("form").ajaxForm(options);
});

ajaxSubmit用法

ajaxSubmit立刻提交表单，接受单个参数，回调函数或者options对象。

$(function(){
       $("form").submit(function(){
         //执行到这一行时，立刻提交
            $("form").ajaxSubmit();
  });
});

比较以上两种写法，还是ajaxForm比较简练一些。

beforeSubmit

通常我们会在提交前做些校验，那就用到beforeSubmit函数

var options={
	beforeSubmit:function(formData, jqForm, options){
		//formData是一个数组，包含表单的全部键值对，格式为 [{"name":"field1","value":"val1"}]
		//返回true则取消表单提交
	}
};
$(function(){
       $("form").ajaxForm(options);
});