一、选择器方法
使用jquery选择器方法来获取form表单的所有数据是一种常见的做法。下面是一个示例html代码:
<form id="myForm"> <input type="text" name="name"/> <input type="checkbox" name="interest" value="reading"/> <input type="checkbox" name="interest" value="music"/> <input type="radio" name="gender" value="male"/> <input type="radio" name="gender" value="female"/> <select name="city"> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="guangzhou">广州</option> </select> </form>
使用以下代码可以获取表单中的所有数据:
$('form').serialize();//返回字符串形式
上述代码将返回类似于"name=jerry&interest=reading&interest=music&gender=male&city=shanghai"的字符串,其中&表示数据分隔符。你还可以使用以下代码获取一个对象形式的数据:
$('form').serializeArray();//返回对象数组形式
这段代码将返回一个对象数组,其中每个对象都包含表单中一个字段的name和value属性。注意,这种方法不适用于文件上传字段(file类型),因为jquery不能直接获取这些字段的值。
二、表单序列化方法
jquery提供了一个方便的方法来获取form表单的数据,这个方法叫做serialize(),它可以将表单中的所有元素序列化为一个字符串,并返回这个字符串。
下面是一个示例html代码:
<form id="myForm"> <input type="text" name="name"/> <input type="checkbox" name="interest" value="reading"/> <input type="checkbox" name="interest" value="music"/> <input type="radio" name="gender" value="male"/> <input type="radio" name="gender" value="female"/> <select name="city"> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="guangzhou">广州</option> </select> </form>
使用以下代码可以获取表单中的所有数据:
$('form').serialize();//返回字符串形式
上述代码将返回类似于"name=jerry&interest=reading&interest=music&gender=male&city=shanghai"的字符串,其中&表示数据分隔符。你还可以使用以下代码获取一个对象形式的数据:
$('form').serializeArray();//返回对象数组形式
这段代码将返回一个对象数组,其中每个对象都包含表单中一个字段的name和value属性。注意,这种方法不适用于文件上传字段(file类型),因为jquery不能直接获取这些字段的值。
三、使用each方法遍历所有表单元素
使用jquery的each方法可以遍历表单中所有的元素,并且获取它们的值。下面是一个示例html代码:
<form id="myForm"> <input type="text" name="name"/> <input type="checkbox" name="interest" value="reading"/> <input type="checkbox" name="interest" value="music"/> <input type="radio" name="gender" value="male"/> <input type="radio" name="gender" value="female"/> <select name="city"> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="guangzhou">广州</option> </select> </form>
你可以使用以下代码来获取表单数据:
var formData = {}; $('form input,form select').each(function(index,element){ formData[element.name] = element.value; });
上述代码将在遍历每个表单元素时,将元素的name属性值作为对象的属性名,将元素的value属性值作为对象的属性值,存储在formData对象里。你还可以使用以下代码来获取所有的checkbox和radio类型的元素的值:
var formData = {}; $('form input[type="text"],form input[type="checkbox"]:checked,form input[type="radio"]:checked,form select').each(function(index,element){ formData[element.name] = element.value; });
这段代码将包含所有类型的表单元素的值,包括被选中的checkbox和radio元素。
四、使用serializeObject方法
jquery提供了一个非常方便的方法来获取表单数据,并将它们转换为一个对象。这个方法叫做serializeObject()。下面是一个示例html代码:
<form id="myForm"> <input type="text" name="name"/> <input type="checkbox" name="interest" value="reading"/> <input type="checkbox" name="interest" value="music"/> <input type="radio" name="gender" value="male"/> <input type="radio" name="gender" value="female"/> <select name="city"> <option value="shanghai">上海</option> <option value="beijing">北京</option> <option value="guangzhou">广州</option> </select> </form>
使用以下代码可以获取表单中的所有数据:
$('form').serializeObject();//返回对象形式
上述代码将返回一个对象,对象的属性名和值分别对应表单元素的name和value属性。表单数据对象的属性名是表单元素的name属性值,值是表单元素的value属性值。对于checkbox和radio元素的处理方式是,如果元素被选中,那么属性值就是元素的value属性值,否则为undefined。
五、使用serializeJSON方法
jquery有一个非常方便的插件,可以将任何序列化的表单数据转换为JSON格式的数据并返回一个字符串。这个插件叫做serializeJSON,你可以在Github上找到它 https://github.com/marioizquierdo/jquery.serializeJSON。
使用以下代码可以获取表单中的所有数据,并将其转换为JSON格式的数据字符串:
$('form').serializeJSON();//返回字符串形式的JSON
这种方法非常好用,但是要注意插件的引入和使用方式。