jquery实现无刷新提交表单

HTML代码

	<form id="form" action="/caijian/servlet/upload" enctype="multipart/form-data" method="post">
		<table >
			<tr>
				<td colspan="2"><input type="text" name="name" id="name"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="text" name="age" id="age"></td>
			</tr>
			<tr><td colspan="2"><input type="submit" value="提交"></td></tr>
		</table>
	</form>

js代码

$().ready(function(){
		$("#form").bind("submit",function(){
			var data = $("#form").serialize();
			$.ajax({
				type:'post',
				data:data,
				url:"http://localhost:8080/caijian/servlet/upload",
				success:function(data){
					alert(data)
				}
			});
			return false;
		});
});

说明：

$("#form").serialize();    序列表表格内容为字符串，用于 Ajax 请求。

断点调试截图

这种方式貌似不支持文件上传。注意表单的每个元素必须添加name属性。

注意 return false ，如果不加这句话，页面就跳转了。

serializeArray()方法是把表单数据转换成json对象

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

注意，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

  [ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
  ]