JSP AJAX之Form序列化登录体验
2016-11-23 20:48
288 查看
package web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import bean.User; public class LoginServlet extends HttpServlet { /** * */ private static final long serialVersionUID = 1L; @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { PrintWriter out=resp.getWriter(); String username=req.getParameter("username"); String userpwd=req.getParameter("userpwd"); String str=""; User user=new User(username,userpwd); StringBuilder sb=new StringBuilder(); sb.append("{"); if(user!=null){ //JSONArray array=JSONArray.fromObject(user); //str=array.toString(); sb.append("\"name\":\""+user.getUsername()); sb.append("\","); sb.append("\"pwd\":\""+user.getPwd()); sb.append("\""); } sb.append("}"); System.out.println(sb); out.print(sb); out.close(); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { this.doGet(req, resp); } public static void main(String[] args) { User user=new User("a","b"); String str=""; if(user!=null){ JSONArray array=JSONArray.fromObject(user); str=array.toString(); } System.out.println(str); } }前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ //Ajax开始的时候,#tip元素显示;结束时,隐藏; $("#tip").ajaxStart(function(){ $(this).show(); }).ajaxStop(function(){ $(this).hide(); }); //下面设置按钮的单击事件; $("#btnLogin").click(function(){ //发送异步请求,设置参数; $.ajax({ url:'LoginServlet', type:'post', data:$("#userForm").serialize(),//序列化form,右括号 dataType:'json', success:function(data){ //成功调用函数中,根据返回的json对象进行判断; //如果有name属性代表登录成功,否则为失败 if(data.name){ $(".divTitle").html("<span>登录成功</span>"); $(".clsShow").html("欢迎你"+data.name+" "+"登录<br/>密码:"+data.pwd); }else{ $("#divError").html("用户名或密码错误").show();//display:block } }, error:function(xhr,msg){alert(msg);} }); }); }); </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <span>用户登录</span> </div> <div class="divContent"> <div id="tip">全力登录中,请稍后...</div> <div class="clsShow"> <div id="divError" class="divError"></div> <!-- 给Form设置一个ID --> <form id="userForm"> <!-- 要序列化的表单字段必须有name属性 --> <div> 名称:<input type="text" id="username" name="username" class="txt"/> </div> <div> 密码:<input type="password" id="userpwd"name="userpwd"class="txt"> </div> <div><!-- 最后一个div包含两个按钮 --> <input type="button"id="btnLogin" value="登录" class="btn"/> <input type="reset" id="btnReset"value="取消"class="btn"/> </div> </form> </div> </div> </div> </body> </html>
针对json数据的处理,大家可以使用json-lib.jar包或gson包,将实体类对象转化为字符串进行回传
相关文章推荐
- JSP AJAX之Form序列化登录体验
- JSP AJAX之Form序列化登录体验
- ajax中post提交form所有元素序列化提交方法.serialize();
- IE中ajax+jsp登录界面,由于缓存导致jsp过滤器与ajax请求被拦截的问题和解决
- 关于jQuery使用serializeArray()序列化表单数据,使用FormData()实现AJAX请求的问题
- jquery中ajax序列化提交form表单的几种方法。
- form 表单序列化参数,ajax提交
- IE中ajax+jsp登录界面,由于缓存导致jsp过滤器与ajax请求被拦截的问题和解决
- 使用Ajax和JSP实现无刷新的登录页面
- WEB-11-JSP概述-1-会话/cookie/session/Ajax-记住密码/登录
- 使用jsp验证Ext.form.FormPanel登录框
- JS 提交表单2-Query Ajax post(json数组,form表单经serialize()序列化,html拼接)
- 表单序列化,jq中的serialize,ajax提交整个form表单,无需逐个拼写json
- ajax提交form序列化
- 沫沫金 - jQuery序列化form表单【支持ajax提交form对象表单entity.xxx】
- ajax中post提交form所有元素序列化提交方法.serialize();
- jsp不通过form和Ajax提交
- jquery序列化form表单使用ajax提交后处理返回的json数据
- 表单 (form) JSP ajax http 请求和响应格式
- jsp页面的ajax和form表单提交后接收数据的区别(SpringMVC控制器返回Map对象)