day10【Ajax与json】综合案例：用户名注册校验

最新推荐文章于 2022-07-22 05:30:00 发布

喵言喵语~

最新推荐文章于 2022-07-22 05:30:00 发布

阅读量145

点赞数 1

分类专栏： java学习日记文章标签： java

本文链接：https://blog.csdn.net/renVictory/article/details/108674312

版权

java学习日记专栏收录该内容

69 篇文章 2 订阅

订阅专栏

day10【Ajax与json】综合案例：用户名注册校验

用户名注册校验分析

在这里插入图片描述
输入时要监听输入的值，获取到输入的值。往Ajax发请求，
servlet处理后返回json数据

用户名注册校验代码实现-jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false"%>
<html>
<head>
    <title>Title</title>
    <%--    2 导入js编写发送请求的代码 --%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>

    <script type="text/javascript">
        $(function () {
            //页面加载成功
            //获取输入框
            $("#username").on("blur",function () {
                //获取输入的账号
                //alert($("#username").val())
                // 3 发送请求
                $.ajax({
                    url:"queryUsername",
                    async:true,
                    data:"username="+$("#username").val(),
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        //{"msg":"恭喜，该邮件地址可以注册","code":0}
                        // alert(data.code)
                        //alert(data.msg)
                        //5：根据服务端返回的json数据，编写显示逻辑
                        if(data.code == 0){
                            $("#msg").text(data.msg)

                            $("#msg").css("color","green")
                        }else{
                            $("#msg").text(data.msg)

                            $("#msg").css("color","red")
                        }
                    },
                    error:function () {
                        alert("服务器发生了错误")
                    }
                });
            })
        })
    </script>
</head>
<body>
        <!-- 1 显示表单 -->
        <form method="post" action="${pageContext.request.contextPath}/queryUsername">
           username: <input id="username" name="username" type="text"><br/>
            <div id="msg"  style="color: #14ff49"></div><br/>
            password: <input id="password" name="password" type="text"><br/>

           <input  type="submit" value="注册"><br/>
        </form>
</body>
</html>

用户名注册校验代码实现-servlet

package com.rh.Servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

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;

//4:编写后台业务逻辑
@WebServlet("/queryUsername")
public class QueryServlet 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");
        //2:处理业务逻辑
        Result result = new Result();
        if("jack".equals(username)){
            //3:都需要是json数据
            result.setMsg("该邮箱地址已被注册");
            result.setCode(1);
            //返回已注册
        }else{
            result.setMsg("恭喜，该邮件地址可以注册");
            result.setCode(0);
            //返回未注册
        }
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(new ObjectMapper().writeValueAsString(result));

    }
}

result

package com.rh.Servlet;

public class Result {
    private String msg;
    private int code;

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

    public Result() {
    }

    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;
    }

    @Override
    public String toString() {
        return "Result{" +
                "msg='" + msg + '\'' +
                ", code=" + code +
                '}';
    }
}