使用DWR在js中调用Java类，检验用户的唯一性

最新推荐文章于 2021-02-12 14:16:16 发布

wqh3520

最新推荐文章于 2021-02-12 14:16:16 发布

阅读量3.2k

点赞数

文章标签： dwr javascript java

本文链接：https://blog.csdn.net/wqh8522/article/details/72673635

版权

dwr 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DWR介绍

DWR是一个Java库，可以使服务器上的Java和浏览器中的JavaScript能够尽可能简单地进行交互和调用。DWR允许在服务器上运行的Java代码使用客户端API将更新发布到任意浏览器组。这允许交互2种方式 - 浏览器调用服务器和服务器调用浏览器。DWR支持Comet，Polling和Piggyback（以正常请求发送数据）作为发布到浏览器的方式。

构建DWR环境

第一步添加Jar包

方法一：从官网直接下载dwr的jar包
这里写图片描述
第一个是jar包，第二个是一个demo实例

方法二：使用maven添加jar包

    <dependency>
        <groupId>org.directwebremoting</groupId>
        <artifactId>dwr</artifactId>
        <version>3.0.2-RELEASE</version>
    </dependency>

这里写图片描述

第二步将DWR servlet定义和映射添加到应用程序的web.xml中

<servlet>
      <display-name>DWR Servlet</display-name>
      <servlet-name>dwr-invoker</servlet-name>  
      <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
      <init-param>
         <param-name>debug</param-name>
         <param-value>true</param-value>
      </init-param>
    </servlet>

    <servlet-mapping>
      <servlet-name>dwr-invoker</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

第三步创建DWR配置文件（dwr.xml）

在WEB-INF下面创建一个dwr.xml文件

<!DOCTYPE dwr PUBLIC
        "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
        "http://getahead.org/dwr/dwr30.dtd">

    <dwr>
        <allow>
            <create creator="new" javascript="JDate">
                <param name="class" value="java.util.Date"/>
            </create>
        </allow>
    </dwr>

测试环境

启动服务器，在浏览器中输入http://localhost:8080/[项目名]/dwr
这里写图片描述

显示如上图，说明环境搭建成功

在页面使用js调用DWR

上面是一个环境的配置，我们这里使用DWR来验证用户注册时用户名的唯一性。

检验用户名的代码

 public String checkUser(String username){
        //这里是直接调用service，方法简单，这里就不帖代码了
        User user = userService.findUserByUsername(username);
        if (user==null){
            return username+"用户名可以使用";
        }else{
            return username+"用户名已经存在";
        }
    }

修改刚才的dwr.xml文件

将下面的代码添加到dwr.xml的allow中

    <!--
        creator=new:创建时new对象
        javascript="searchServlet"：在js中使用searchServlet调用该类的
        value="" : 类的全路径
    -->
    <create creator="new" javascript="searchServlet">
        <param name="class" value="com.wqh.search.servlet.SearchServlet"/>
    </create>

测试

与上面的测试方法相同
这里写图片描述
点击上面这个超链接

将上面两段js复制到jsp中

页面代码，建议不要直接复制，因为这里使用了bootstrap，直接复制可能会报错

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/style/bootstrap.min.css"/>
        <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.1.1.min.js"></script>
        <script type='text/javascript' src='/LuceneSearch/dwr/engine.js'></script>
        <script type='text/javascript' src='/LuceneSearch/dwr/interface/searchServlet.js'></script>
        <title>用户注册</title>
        <style>
            .mainCSS{
                width: 700px;
                height: 500px;
                margin-top: 100px;
                margin-left: 400px;
            }
        </style>
        <script type="text/javascript">
            function checkOnly(){
               var username = $("#username").val();
                //使用js调用Java类，username：需要验证的用户名，，，后面为回调函数，这里就不详细说明了
                searchServlet.checkUser(username,function (msg) {
                    var resultMsg = "&nbsp;&nbsp;<span style='color:red;'>"+msg+"</span>"
                    $("#showmsg").append(resultMsg)
                });
            }
        </script>
    </head>
    <body>
    <div class="mainCSS">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">用户登录</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                            <a href="javascript:checkOnly()"><span id="showmsg">校验唯一性</span></a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;码</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">email</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" id="submit" class="btn btn-default">注册</button>
                            <%--<a href="#" style="margin-left: 20px">注册账号</a>--%>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    </body>
    </html>

运行

启动服务器运行
这里写图片描述
在我的数据库中已经含有admin，所以结果是成功的

wqh3520

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用DWR在js中调用Java类，检验用户的唯一性

DWR介绍 DWR是一个Java库，可以使服务器上的Java和浏览器中的JavaScript能够尽可能简单地进行交互和调用。DWR允许在服务器上运行的Java代码使用客户端API将更新发布到任意浏览器组。这允许交互2种方式 - 浏览器调用服务器和服务器调用浏览器。DWR支持Comet，Polling和Piggyback（以正常请求发送数据）作为发布到浏览器的方式。构建DWR环境第一步添加Ja
复制链接

扫一扫