【入门学习-用Servlet和Ajax技术,校验用户名是否存在】

最新推荐文章于 2024-04-14 10:21:18 发布

小pcc

最新推荐文章于 2024-04-14 10:21:18 发布

阅读量1.2k

点赞数 2

分类专栏： javaWeb 文章标签： ajax json javascript servlet java

本文链接：https://blog.csdn.net/qq_43048507/article/details/121716029

版权

javaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学web前端，发现有些东西特别容易忘。学vue之前想把js(包括一些前端框架)搞熟悉了。

原理就是用户在注册界面输入用户名，当文本框失去焦点后，触发post请求，把文本框里的内容传到服务器，服务器进行校验，将结果返回给前端页面。没有用数据库的知识，username的值直接随便在servlet里定义了一个，就是作为一个新手熟悉前后端数据交互。(其实是把csdn当作笔记本用了hahahahahahaha-------)

在IDEA里，启动了tomcat服务器，把前端页面命名为：“03_用户名校验.html”，后端用的servlet，在com.example.learning_tomcat包下创建个servlet类，类名为UserServlet，话不多说，上代码，注释都在里面。（所有的代码都在下面了）

前端部分：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="utf-8">
    <title>注册-个人中心</title>
    //要引入jquery
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
                //当用户名框失去焦点时，提交post请求
                $("#username").blur(function(){
                    //获取文本框里面的值
                    var username = $(this).val();
                    //post请求
                    $.post("userservlet",{username:username},function(data){
               
                   //期望服务器返回的是{"userExist":true,"msg":"这个用户已经存在了"}这种
                        if(data.userExist){
                            $("span").css("color","red");
                            $("span").html(data.msg);
                        }else{
                            $("span").css("color","green");
                            $("span").html(data.msg);
                        }
                    },"json");//这里要注意，最后一个type值是响应结果的类型json
                });


        });

    </script>
</head>
<body>
    <!--用了内联的样式随便美化了一下-->
    <div style="background-color: pink; margin: 0 auto; height: 200px; width: 420px; padding-top: 70px; border-radius: 20px 20px 20px">
        <div style="background-color: peachpuff; height: 120px; width:250px; margin: 0 auto;padding-top: 20px; border-radius: 15px 15px 15px">
            <!--就不提交表单了-->
            <form >
                用名：<input id="username" type="text" name="username" placeholder="请输入用户名"><br>
                密码：<input type="password" name="password" placeholder="请输入密码"><br>
                <input type="submit" value="注册"><span></span>
            </form>
        </div>

    </div>

</body>
</html>

后端部分：

在com.example.learning_tomcat包下创建个servlet类，类名为UserServlet，不在web.xml中配置，servlet3之后都能用注解@WebServlet("/userservlet")

package com.example.learning_tomcat;

//用的jackson的json解析器
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;
import java.util.Map;

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

    @Override
        //重写了post和get方法这里只用post，上面那个get方法不写了，直接调用这里的doGet方法
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求到的数据
        String username_json = request.getParameter("username");
        //设置响应数据的格式
        response.setContentType("text/html;charset=utf-8");
        //创建自定map，可以自定义对应关系的集合
        Map<String,Object> map = new HashMap<String,Object>();


        /*
            这里就不用数据库了，我们主要来学习ajax
            判断用户名是否是pcc
        */
        if("pcc".equals(username_json)){
            //注册用户名是pcc
            map.put("userExist",true);
            map.put("msg","这个用户已经存在了");
        }else {
            //注册用户名不是pcc
            map.put("userExist",false);
            map.put("msg","用户名可以使用");
        }

        //创建jackson的核心对象
        ObjectMapper mapper = new ObjectMapper();
        //将Map转换为json字符串
        mapper.writeValue(response.getWriter(),map);

//也可以用下面的方法
//        String json = mapper.writeValueAsString(map);
//        //将转换好的json响应到客户端浏览器
//        response.getWriter().write(json);

    }
}

启动tomcat服务器，运行结果示例：

小pcc

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【入门学习-用Servlet和Ajax技术,校验用户名是否存在】

当文本框失去焦点后，触发post请求，把文本框里的内容传到服务器，服务器进行校验，将结果返回给前端页面。没有用数据库的知识，username的值直接随便在servlet里定义了一个，就是作为一个新手熟悉前后端数据交互。
复制链接

扫一扫