JSP AJAX之Form序列化登录体验

张哥编程

发布于 2024-12-17 13:11:08

5620

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>