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

最新推荐文章于 2023-03-16 17:31:53 发布

转载最新推荐文章于 2023-03-16 17:31:53 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/crazymus/blog/345091

文章标签：

#javascript #python #php #ViewUI

本文介绍了一种利用jQuery的serialize()函数简化表单数据获取的方法，并通过一个实例展示了如何自定义函数getFormData()来收集表单数据，并进一步通过AJAX发送这些数据。

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

2019独角兽企业重金招聘Python工程师标准>>>

当表单数据项很多时，手动获取表单项的值将变得效率低下，结合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="male" />男
				<input type="radio" name="sex" value="female" />女
			</td>
		</tr>
		
		<tr>
			<td>地区</td>
			<td>
				<select name="area">
					<option value="heping">和平区</option>
					<option value="nankai">南开区</option>
					<option value="xiqing">西青区</option>
					<option value="hexi">河西区</option>
				</select>
			</td>
		</tr>
		
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox" name="hobby[0]" value="movie" />电影
				<input type="checkbox" name="hobby[1]" value="music" />音乐
				<input type="checkbox" name="hobby[2]" value="basketball" />篮球
			</td>
		</tr>
		
		<tr>
			<td>个人介绍</td>
			<td>
				<textarea name="intro" ></textarea>
			</td>
		</tr>
		
		<tr>
			<td></td>
			<td>
				<input type="button" value="提交" id="submit" />
			</td>
		</tr>
	</table>
</form>

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

$(function(){
	
	$('#submit').click(function(){
		//选取表单
		var form = $('#fm');
		//获取表单数据
		var data = getFormData(form);
		//发送AJAX请求
		$.post('test.php',data,function(data){
			console.log('ok');
		});
	
	});
	
});

getFormData()的实现很简单：

function getFormData(form){
	var data = form.serialize();
	data = decodeURI(data);
	var arr = data.split('&');
	var item,key,value,newData={};
	for(var i=0;i<arr.length;i++){
		item = arr[i].split('=');
		key = item[0];
		value = item[1];
		newData[key] = value;
	}	
	return newData;
}

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

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

    [intro] => 321432423
)

和普通的表单提交的数据格式是一样的，我们可以很方便的进行处理！

转载于:https://my.oschina.net/crazymus/blog/345091