校验用户名是否存在案例

2022-08-21 14:00:16 阅读：157 来源： 互联网

标签：username map 用户名 span 校验案例 html import response

案例

校验用户名是否存在
- 服务器响应的数据，在客户端使用时，要想当作json数据格式使用
  - $.get(type)：将最后一个参数tupe指定为"json"
  - 在服务器端设施MIME类型
    - response.setContentType("test/html;charset=utf-8");

regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        //在页面加载完成后执行
        $(function () {
            //给username绑定blur事件
            $("#username").blur(function () {
                //获取username输入框的值
                var username = $(this).val();
                //发送ajax请求
                $.get("/findUserServlet", {username: username}, function (data) {
                    var span = $("#s_username");
                    if (data.userExsit) {
                        span.css("color", "red");
                        span.html(data.msg);
                    } else {
                        span.css("color", "green");
                        span.html(data.msg);
                    }
                },"json");
            });
        });
    </script>
</head>
<body>
    <form>
        用户名:<input type="text" id="username" name="username" placeholder="请输入用户名">
        <span id="s_username"></span>
        <br><br>
        密码:<input type="password" name="password" placeholder="密码"><br><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

FindUserServlet

package com.ailyt.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;

@WebServlet(name = "findUserServlet", value = "/findUserServlet")
public class FindUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("test/html;charset=utf-8");
        String username = request.getParameter("username");

        HashMap<String, Object> map = new HashMap<>();

        if ("tom".equals(username)) {
            map.put("userExsit",true);
            map.put("msg", "此用户名太受欢迎请换一个");
        } else {
            map.put("userExsit",false);
            map.put("msg", "用户名可用");
        }

        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }
}

标签：username,map,用户名,span,校验,案例,html,import,response
来源： https://www.cnblogs.com/ailhy/p/16609909.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

校验用户名是否存在案例

案例

regist.html

FindUserServlet