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

最新推荐文章于 2025-06-14 20:28:45 发布

原创最新推荐文章于 2025-06-14 20:28:45 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用jQuery的serialize()方法简化AJAX表单提交过程。通过两个按钮触发不同的提交方式，一种是手动获取表单元素值，另一种是直接序列化整个表单。这两种方法都实现了将表单数据发送到服务器端进行处理。

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

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，显示数据