欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

关于第一个servlet

程序员文章站 2024-02-22 10:09:04
...

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

  1. 首先创建一个JavaEE项目，选择webApplication, 填入自己的项目名称之后，见到的目录格式如下：
    关于第一个servlet注意目录结构web下是web-inf，index.jsp与web是同级目录
  2. 在web目录下新建index.html文件
  3. 在index.html中添加jquery文件：
    1）先把我们下载好的jquery jar包放在web文件夹的js文件夹，一定要注意js文件夹跟web-inf文件夹是并列的！！！
    关于第一个servlet
    然后再head标签中引入jquery文件。 2）引入需要的jar包，这给servlet所需要的jar包：
    关于第一个servlet
    下载连接：https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
    这个jar包作用是将我们的服务端处理后的数据转为json，然后回传给我们的客户端。
    注意把包放在web-inf -> lib文件夹下并不算完哦，要把这个jar包导入哦，导入是通过点击file，然后project structure, 然后点击+号，导入我们的jar包。
    关于第一个servlet
    到现在为止，我们是把这个包啊导进去了，下面就开始写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);
    }

执行就可以啦!

上一篇： 运行第一个简单servlet

下一篇： win32 串口 编程 (一)

推荐阅读