1.开发步骤:
1)首先引入的是jquery文件。
<scriptsrc="js/jquery-2.2.4.min.js">
</script>
2)编写相应的js的处理事件。
$(function(){ $(".btn").click(function(){ }); }); |
3.编写相应的ajax处理(由于需要处理json的数据,那么就采用的是jquery中的$.ajax
方法)(具体使用方法参考api)
$(".btn").click(function(){ //把数据提交,实际是通过ajax的方式去提交数据到服务器 var sdata = $("form").serialize();//对表单的数据进行序列化 var url = "reg.do?"+sdata; $.ajax({ type: "GET", url: url, success: function(data){ $("#info tr:not(:first)").remove(); for(var i in data){ //i表示的是索引 var str ="<tr><td>"+data[i].userName+"</td><td>"+data[i].userPwd+"</td></tr>"; $("#info").append(str); } }, dataType:"json" //设置返回的数据格式为json对象
}); }); |
4.相应的服务器端的servlet处理(由于需要加入json的序列化,所以需要引入相应的jar包),相应的代码:
req.setCharacterEncoding("UTF-8"); resp.setCharacterEncoding("utf-8");//处理的是返回字符串的乱码 //resp.setContentType("text/html,charset=gbk"); String userName = req.getParameter("txtUserName");//用户名 String userPwd = req.getParameter("txtUserPwd");//用户密码 String userEmail = req.getParameter("txtUserEmail");//用户Email String userReason = req.getParameter("txtUserReason");//注册原因 String userAddress = req.getParameter("txtUserAddress");//居住地址 UserInfo u = new UserInfo(); u.setUserName(userName); u.setUserPwd(userPwd); u.setRegReason(userReason); u.setUserEmail(userEmail); u.setUserAddress(userAddress); UserInfoService userService = new UserInfoService(); try { if(userService.userReg(u)){//注册成功, List<UserInfo> list = userService.getList(); //序列化的操作 JSONArray jsonArray = JSONArray.fromObject(list); String strInfo = jsonArray.toString();//把集合对象转换成json的字符串 System.out.println(strInfo); PrintWriter pw = resp.getWriter(); pw.print(strInfo); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } |