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

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