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

快来打我* 2024-02-17 18:13 29阅读 0赞

HTML页面结构：

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

![Center][]

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

![Center 1][]

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

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7b4e01342056492f9b0c2068a94c5320.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e0d501cf70c64d76994382b788878d75.png