互联网技术 · 2024年2月22日

使用Ajax实现登录示例

这篇文章主要为大家详细介绍了Ajax实现登录案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Ajax登录案例,供大家参考,具体内容如下

Ajax实现登录案例

Msg

package com.lbl.msg;

public class Msg {
  String msg;
  int code;

  public Msg() {
  }

  public Msg(String msg, int code) {
    this.msg = msg;
    this.code = code;
  }

  public String getMsg() {
    return msg;
  }

  public void setMsg(String msg) {
    this.msg = msg;
  }

  public int getCode() {
    return code;
  }

  public void setCode(int code) {
    this.code = code;
  }
}

RegisterServlet

package com.lbl.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.lbl.msg.Msg;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(“/register”)
public class RegisterServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    doGet(request, response);
  }

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1:获取请求发送的数据
    String username = request.getParameter(“username”);
    response.setContentType(“text/html;charset=UTF-8”);
    //2:判断用户名是否注册
    if(“abc123”.equals(username)){
      Msg msg = new Msg(“用户名已经注册”,0);
      //用户名已经注册 {“flag”:false,”info”:”用户名已经注册”};
//      String jsonStr = “{“flag”:false,”info”:”用户名已经注册”}”;
      //响应回浏览器
      response.getWriter().write(new ObjectMapper().writeValueAsString(msg));
    }else{
      Msg msg = new Msg(“可以注册”,1);
      //用户名没有注册
//      String jsonStr = “{“flag”:true,”info”:”可以注册”}”;
      //响应回浏览器
      response.getWriter().write(new ObjectMapper().writeValueAsString(msg));
    }

  }
}

json_register.html

<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Title</title>
  <script src=”js/jquery-3.3.1.js”></script>
  <script type=”application/javascript”>
    $(function () {
      //1: 给用户名输入框绑定失去焦点事件(onfocus onblur)
      $(“#username”).on(“blur”,function () {
        //获取用户名输入框数据
        var username = $(“#username”).val();
        //2:向服务器发出异步请求,让服务器去查询用户名是否存在
        $.post(
          “register”, //表示服务器的servlet路径
          “username=”+username, //表示向服务器发送的数据
          function (data) { // msg:用户名已经注册 code:0
        &

OpenMagic API

Need more than content? Move into the product flow.

If you are here for model access, pricing, developer docs, or the future API console, the dedicated product path now lives on api.openmagic.ai.

登录免费注册