关于第一个servlet

最新推荐文章于 2023-06-30 23:14:59 发布

划水er

最新推荐文章于 2023-06-30 23:14:59 发布

阅读量79

点赞数

文章标签： servlet get请求 jquery导入用户名校验

本文链接：https://blog.csdn.net/weixin_41801852/article/details/103076644

版权

小白真是小白，就一个servlet搞了贼久，功能是输入用户名跟密码，如果存在这个用户名，则提示用户这个用户名已存在。实际应用中，这个用户名需要从数据库中查询，这里做简单的模拟所以设这个用户名为"tom"，所有就用一个字符串代替。先贴个效果图：
在这里插入图片描述

首先创建一个JavaEE项目，选择webApplication, 填入自己的项目名称之后，见到的目录格式如下：
注意目录结构web下是web-inf，index.jsp与web是同级目录
在web目录下新建index.html文件
在index.html中添加jquery文件：
1）先把我们下载好的jquery jar包放在web文件夹的js文件夹，一定要注意js文件夹跟web-inf文件夹是并列的！！！

然后再head标签中引入jquery文件。 2）引入需要的jar包，这给servlet所需要的jar包：

下载连接：https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
这个jar包作用是将我们的服务端处理后的数据转为json，然后回传给我们的客户端。
注意把包放在web-inf -> lib文件夹下并不算完哦，要把这个jar包导入哦，导入是通过点击file，然后project structure, 然后点击+号，导入我们的jar包。

到现在为止，我们是把这个包啊导进去了，下面就开始写html啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>

    <script>
        $(function () {
            $("#username").blur(function(){
                var username = $(this).val();
                $.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);
                    }
                });
            });
        });
    </script>

</head>
<body>
<form>
<input name="username" type="text" id="username" placeholder="请输入用户名">
<span id="s_username"></span><br>
<input name="password" type="password" id="password" placeholder="请输入密码">
<br>
<input name="注册" type="submit" value="注册"><br>
</form>

</body>
</html>

对上面的html解释以下：
script中的function(){}是javascript中的立即执行函数，通过$("#username")表示ID为username的元素，blur函数指的是输入域失去焦点 (blur) 。
当失去焦点的时候我们发送get请求，判断这个输出的用户名，是否是用过的。
第一个参数解释：servlet的name，这个请求跟哪个servlet对应这里就写那一个，注意跟servlet中的webServlet注解相一致。
第二个参数解释：我们传过去的参数，如果有多个可以写个,然后password:password方式来写，最后是服务端回传数据data之后执行的函数，这里在这个函数加了一些判断语句。

注意的细节：function的括号对应关系以及分号的使用
$.get这里有个.

然后新建Servlet，通过右键new->servlet，新建我们的servlet。

public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        Map<String,Object> map = new HashMap<String,Object>();
        //这里设置回传的数据格式，如果没有这句话，会造成页面显示的时候出现乱码
        response.setContentType("application/json;charset=UTF-8");
        if ("Tom".equals(username)){
            map.put("userExsit",true);
            map.put("msg","这个用过了");
        }
        else{
            map.put("userExsit",false);
            map.put("msg","这个可用");
        }
        //将服务器端的数据转为json
        ObjectMapper mapper = new ObjectMapper();
        //回传给客户端
        mapper.writeValue(response.getWriter(),map);
    }

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }

执行就可以啦!

划水er

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于第一个servlet

小白真是小白，就一个servlet搞了贼久，功能是输入用户名跟密码，如果存在这个用户名，则提示用户这个用户名已存在。实际应用中，这个用户名需要从数据库中查询，这里做简单的模拟所以设这个用户名为"tom"，所有就用一个字符串代替。先贴个效果图：首先创建一个JavaEE项目，选择webApplication, 填入自己的项目名称之后，见到的目录格式如下：注意目录结构web下是web-inf，...
复制链接

扫一扫