JQuery ajax()使用提交表单数据

HTML页面结构：

 <form id="frm">
姓名: <input type="text" name="uname" value="John" /><br />
密码: <input type="text" name="upass" value="123456" /><br />
<input name="sub" type="button" value="注册1"  id="btn1"/>
<input name="sub" type="button" value="注册2"  id="btn2"/>
</form>

JS：

$(function(){
	//1)获取表单的参数来传值
	$("#btn1").click(function(){
	  $.ajax({
		type:"POST",
		url:"my",
		data:"uname="+$("[name='uname']").val()+"&upass="+$("[name='upass']").val(),
	    success:function(data){
	    	alert(data);
	    }	
	});
	
  });
	
//	这样，我们就可以把序列化的值传给ajax()作为url的参数，
//	轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()
	//2)用ajax()使用serialize()提交表单数据
	$("#btn2").click(function(){
		$.ajax({
			type:"post",
			url:"my",
			data:$("#frm").serialize(),  //要提交的表单 
		    success:function(data){
		    	alert(data);
		    }	
		});
		
	});
	
	

	
})

Servlet页面：

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
	
		//中文处理
		request.setCharacterEncoding("utf-8");
		
		//获取数据
		String name = request.getParameter("uname");
		String pwd = request.getParameter("upass");
		
		System.out.println(name+"\t"+pwd);
		
		//响应文本
		out.println(name+"="+pwd);
		
		out.flush();
		out.close();
	}

效果：

1)单击注册1，显示数据

2)单击注册2，显示数据

总之：jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化！