jquery获取form表单所有数据

一、选择器方法

使用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

这种方法非常好用，但是要注意插件的引入和使用方式。