AJAX-用户名验证

最新推荐文章于 2023-05-07 16:04:19 发布

承北风

最新推荐文章于 2023-05-07 16:04:19 发布

阅读量124

点赞数

分类专栏：笔记日常学习文章标签： ajax servlet jquery

本文链接：https://blog.csdn.net/qq_33755492/article/details/118876595

版权

笔记同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

日常学习

75 篇文章 0 订阅

订阅专栏

功能：验证用户名是否存在

jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册页面</title>
<script type="text/javascript" src="test/js/jquery-1.7.2.min.js"></script>
    <script>

        $(function () {  //在页面加载完成之后

            $("#username").blur(function () {  //给username绑定blur事件

                var username = $(this).val();  //获取username文本输入框的内容

                $.get("finduserservlet",{username:username},function (data) {  //发送ajax请求，期望服务器响应的数据格式

                    //username为传入servlet的数据
                    //function为回调函数，传出servlet中的数据，当前程序为servlet中的map集合

                    var span = $("#s_username");  //获取id为s_username的数据
                    if(data.userExsit){  //判断用户存在

                        //设定span标签中的样式
                        span.css("color","red");
                        span.html(data.msg);
                        return;
                    }else {  //用户不存在

                        span.css("color","green");
                        span.html(data.msg);
                        return;
                    }
                },"json") //期待传回的数据类型为json类型
            })
        })
    </script>
</head>
<body>
<form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span><br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>

</form>
</body>
</html>

servlet页面：

package Servlet1;



import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

public class FindUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setContentType("text/html;charset=UTF-8");

        String username = req.getParameter("username");
        //接收jsp文件中get方法传入的数据username

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

        if("joune".equals(username)){
                map.put("userExsit",true);
                map.put("msg","用户名已存在");
        }else {
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        Gson gson = new Gson();
        String s = gson.toJson(map);  //将map集合中的数据转化为json对象
        resp.getWriter().write(s);  //将集合中的数据写入到页面上

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }


}

承北风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX-用户名验证

功能：验证用户名是否存在jsp页面：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>注册页面</title><script type="text/javascript" src="test/js/jquery-1.7.2.min.js"></script> <scri
复制链接

扫一扫