JSP AJAX之Form序列化登录体验

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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;@Overrideprotected 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();}@Overrideprotected 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="userForm"><div>名称：<input type="text" id="username" name="username" class="txt"/></div><div>密码:<input type="password" id="userpwd"name="userpwd"class="txt"></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>