【前后端交互1】jsp（html）与后端java类交互【使用DWR实现JS调用服务端Java代码】

第一步要先将两个jar包（commons-logging-1.1.1.jar和dwr.jar）拷贝到web工程的WEB-INF/lib目录下。
jar包已经上传–>资源名称【commons-logging-1.1.1+dwr】

打开web工程WEB-INF目录下的web.xml文件，配置处理请求的Servlet，具体内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>dwr_web</display-name>
  <welcome-file-list> 
    <welcome-file>index.jsp</welcome-file> 
  </welcome-file-list>
 
  <servlet>
    <servlet-name>dwr</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</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
</web-app>

在web.xml所在目录下创建dwr的配置文件dwr.xml，配置文件内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
    "http://getahead.org/dwr/dwr30.dtd">
 
<dwr> 
    <allow>
        <create creator="new" javascript="helloworldService">
            <param name="class" value="com.csii.dwr.service.HelloWorldService"></param>
        </create>
    </allow>
 
</dwr>

创建支持JS调用的服务器端的Java类

package com.csii.dwr.service;
 
public class HelloWorldService {
    public String sayHello(String username)
    {
        return "Hello World!" + username;
    }
}

部署应用后，在浏览器中输入http://localhost:8080/dwr_web/dwr/可以查看服务端公开了哪些支持JS调用的服务。【注意dwr_web是自定义的项目目录名称】
【具体是什么名字，可以先跑一跑工程创建时自带的index.jsp看看】
要想在JS中调用服务端公开的服务，我们需要將engine.js和helloworldService.js引入到页面中(上图测试界面有相关说明)，
引入代码上如下：


<script type='text/javascript' src='/dwr_web/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/interface/helloworldService.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/util.js'></script>

【完整jsp】
接下来我们编写一个JSP页面，在JSP中使用helloworldService服务：

<pre name="code" class="html"><%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Index Page</title>
<script type='text/javascript' src='/dwr_web/dwr/engine.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/interface/helloworldService.js'></script>
<script type='text/javascript' src='/dwr_web/dwr/util.js'></script>
</head>
<body>
 
<button οnclick="sayHello()">测试</button>
 
<script type="text/javascript">
    var sayHello = function(){
        return helloworldService.sayHello("Rongbo_J",callBack);//请注意：调完java函数sayHello将会调用callBack函数且把返回值作为callBack参数
    }
    var callBack = function(data)
    {
        alert(data);
    }
</script>
</body>
</html>

我们在页面中添加了一个按钮，点击按钮是调用sayHello方法，在sayHello方法中通过helloworldService.sayHello(“Rongbo_J”,callBack)形式调用服务端sayHello函数，第二个参数是一个回调函数用于接收服务端返回的数据。在回调函数中我们弹出服务器端返回的内容。

鸣谢：https://blog.csdn.net/n1007530194/article/details/50134247?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

【前后端交互1】jsp（html）与后端java类 交互 【使用DWR实现JS调用服务端Java代码】

猜你喜欢

【前后端交互1】jsp（html）与后端java类交互【使用DWR实现JS调用服务端Java代码】