Jsp servlet+jquery+ajax实现

分手后的思念是犯贱 2023-10-17 09:22 13阅读 0赞

下面就用Jquery中的serialize()方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的jQuery 对象。

(1)JSP页面

<body>
    	<div id="d1"></div>
    	<form method="get" action="" name="frm">
    		<table border="1" width="349" height="174">
    			<tbody>
    				<tr>
    					<td> uname:</td>
    					<td> <input type="text" name="uname">
    					</td>
    				</tr>
    				<tr>
    					<td> upass:</td>
    					<td> <input type="password" name="upass">
    					</td>
    				</tr>
    				<tr>
    					<td> sex:</td>
    					<td> <input type="radio" checked="checked" value="男"
    						name="gender">男 <input type="radio" value="女"
    						name="gender">女</td>
    				</tr>
    				<tr>
    					<td> city:</td>
    					<td> <select size="1" name="city">
    							<option value="上海">上海</option>
    							<option value="北京">北京</option>
    							<option selected value="杭州">杭州</option>
    					</select></td>
    				</tr>
    				<tr>
    					<td> </td>
    					<td> <input type="button" value="注册" name="button1">
    					</td>
    				</tr>
    			</tbody>
    		</table>
    	</form>
    </body>

(2)JS

$(function(){
    	$("[name=button1]").click(function(){
    		//数据
    		var date=$("form").serialize();
    		
    		//alert(date);
    		
    		$.getJSON("my",date,function(datas){
    	     	  $("#d1").html(datas.name+" "+datas.pwd+" "+datas.sex+" "+datas.city);
    		});
    
    	});
    
    });

(3)Servlet

public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
    		response.setContentType("text/html;charset=utf-8");
    		PrintWriter out = response.getWriter();
    		
    		String name=request.getParameter("uname");
    		String pwd=request.getParameter("upass");
    		String sex=request.getParameter("gender");
    		String city=request.getParameter("city");
    		//拼接json字符串
    		String json ="{\"name\":\""+name+"\",\"pwd\":\""+pwd+"\",\"sex\":\""+sex+"\",\"city\":\""+city+"\"}";
    		
    	//	System.out.println(json);
    		out.print(json);  //响应的结果
    //		out.println("{\"aaa\":\""+name+"\"}");
    		
    		fastjson///
    		Map<String, Object> map= new HashMap<String, Object>();
    		map.put("name", name);
    		map.put("pwd", pwd);
    		map.put("sex", sex);
    		map.put("city", city);
    		
    		String jsonString = JSON.toJSONString(map);
    		
    		System.out.println("map==>json==>"+jsonString);
    		//
    		
    		out.flush();
    		out.close();
    	}

效果:

![Center][]

[Center]: https://img-blog.csdn.net/20161112164620148?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center