首页 > 代码库 > jQuery通过AJAX快速提交表单数据

jQuery通过AJAX快速提交表单数据

当表单数据项很多时,手动获取表单项的值将变得效率低下,结合jQuery提供的函数serialize(),我们可以实现快速获取数据并提交表单数据。

请看下面的表单:

<form id="fm">
	<table>
		<tr>
			<td>姓名</td>
			<td>
				<input type="text" name="name" />
			</td>
		</tr>
		
		<tr>
			<td>年龄</td>
			<td>
				<input type="text" name="age" />
			</td>
		</tr>
		
		<tr>
			<td>密码</td>
			<td>
				<input type="password" name="password" />
			</td>
		</tr>
		
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" name="sex" value="http://www.mamicode.com/male" />男
				<input type="radio" name="sex" value="http://www.mamicode.com/female" />女
			</td>
		</tr>
		
		<tr>
			<td>地区</td>
			<td>
				<select name="area">
					<option value="http://www.mamicode.com/heping">和平区</option>
					<option value="http://www.mamicode.com/nankai">南开区</option>
					<option value="http://www.mamicode.com/xiqing">西青区</option>
					<option value="http://www.mamicode.com/hexi">河西区</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby[]" value="http://www.mamicode.com/movie" />电影
				<input type="checkbox" name="hobby[]" value="http://www.mamicode.com/music" />音乐
				<input type="checkbox" name="hobby[]" value="http://www.mamicode.com/basketball" />篮球
			</td>
		</tr>
		
		<tr>
			<td>个人介绍</td>
			<td>
				<textarea name="intro" ></textarea>
			</td>
		</tr>
		
		<tr>
			<td></td>
			<td>
				<input type="button" value="http://www.mamicode.com/提交" id="submit" />
			</td>
		</tr>
	</table>
</form>


我们可以通过自定义函数getFormData()来获取表单的数据,请看下面的例子:

$(function(){
	
	$(‘#submit‘).click(function(){
		//选取表单
		var form = $(‘#fm‘);
		//获取表单数据
		var data = http://www.mamicode.com/getFormData(form);> 


getFormData()的实现很简单:

function getFormData(form){
	var data = http://www.mamicode.com/form.serialize();> 


test.php接收到的数据将会是:

Array
(
    [name] => 3241324
    [age] => m_admin
    [password] => 123
    [sex] => male
    [area] => heping
    [hobby] => Array
        (
            [0] => movie
            [1] => music
        )

    [intro] => 321432423
)
和普通的表单提交的数据格式是一样的,我们可以很方便的进行处理!


jQuery通过AJAX快速提交表单数据