jQuery框架+DWR框架实现的Java Web中的Ajax效果(异步请求,局部刷新)

简介:
+关注继续查看

一 简介和实现效果

这里用一个小例子来简单举例说明,做一个搜索引擎搜索提示效果,通过不断输入字符,然后在下方给出搜索提示。效果图如下:

wKioL1ZZSd-BXabpAAEBh395zLw764.png

wKiom1ZZSX6QmExoAACAJbOFSZs407.png

通过上图可以看到,当输入一个“a”时,提示了很多内容,然后继续输入一个“e”后,提示的范围明显就变小了。

注:在文末我会给出完整源代码的下载链接,以供大家参考


二 具体实现

1 在eclipse for java ee中创建一个Java Web工程,然后导入相应的jar包,特别说明的是:这里要导入一个额外的dwr.jar。也就是说,如果在Struts2工程中,除了要导入Struts2相关的jar包外,还要导入一个dwr.jar。可以自行在网上下载,也可以通过文末的下载链接下载。

2 配置好数据库连接,连接MySQL中的“mysql”这个库来做测试,并定义一个方法getKeyWord(String key),以供我们待会调用,目的是给定一个字符串,然后在“help_keyword”这个表中进行模糊查询,然后返回结果。

DbConn.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
package com.dao;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
 
import javax.naming.InitialContext;
import javax.sql.DataSource;
 
public class DbConn {   
    /**
     * 通过JNDI连接池的方式
     * */
    public static Connection getConnection(){
        try {         
            InitialContext context = new InitialContext();
            DataSource dSource = (DataSource) context.lookup("java:comp/env/jdbc/mysql");
            Connection conn = dSource.getConnection();
             
            return conn;                      
        catch (Exception e) {        
            e.printStackTrace();
        }      
        return null;
    }
     
    public String getKeyWord(String key){
        Connection connection = getConnection();
        try {
            PreparedStatement preparedStatement = connection.prepareStatement("select name from help_keyword where name like ?");
            preparedStatement.setString(1, key + "%");
            ResultSet resultSet = preparedStatement.executeQuery();
             
            StringBuffer stringBuffer = new StringBuffer();
            while(resultSet.next())
                stringBuffer.append(resultSet.getString(1) + "<br>");
 
            resultSet.close();
            connection.close();  //不关的话,在JNDI模式下查询10次以后就会被卡死
            return stringBuffer.toString();       
        catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return "";
    }
}

help_keyword这个表:

wKioL1ZZSiWQ99WCAAGeSjYnNZA930.png

3 定义一个Action “KeyAction.java”,主要是定义了一个方法“getName(String key)”,用于调用dao层的数据库操作,返回查询到的数据,同时这个方法也被我们前台调用,然后取得数据并显示。(PS:业务逻辑层biz省略了)

KeyAction.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
package com.action;
 
import com.dao.DbConn;
import com.opensymphony.xwork2.ActionSupport;
 
public class KeyAction extends ActionSupport {
    private static final long serialVersionUID = 1L;
 
    public String getName(String key)throws Exception{
        DbConn dbConn = new DbConn();
        return dbConn.getKeyWord(key);
    
}

4 配置DWR框架


(1)在web.xml中增加如下节点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- dwr -->
  <servlet>
      <servlet-name>dwr-invoker</servlet-name>
      <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>false</param-value>   
    </init-param>
  </servlet>
   
  <servlet-mapping>
      <servlet-name>dwr-invoker</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

(2)在web.xml同目录下新建DWR配置文件:dwr.xml(PS:WebContent/WEB-INF/dwr.xml)。特别说明的是,这里的new表示每次调用都用新建的方式;javascript这个参数是指定一个实例化名称,可以随意命名,但是要和前台的JavaScript里相对应。method这个参数是指调用com.action.KeyAction这个类中的哪个方法,我们这里当时是“getName”


dwr.xml:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://directwebremoting.org/dwr/dwr30.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="KeyWord">
            <param name="class" value="com.action.KeyAction"></param>
            <include method="getName"/>
        </create>
    </allow>
</dwr>

5 前台调用,新建一个index.jsp,用于显示效果。其中有一些简单的jQuery语法,具体细节可自行参考W3School,注意的是,JavaScript中的“KeyWord.getName(key,callBack);”才是进行数据异步传送的关键,通过KeyWord实例调用getName()方法取得的数据被函数callBack获得,然后再将相关数据写入页面中,实现页面局部刷新


index.jsp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <base href="<%=basePath%>">
    <title>Struts2 Ajax Google</title>
    <script type='text/javascript' src='dwr/engine.js'></script>
   <script type='text/javascript' src='dwr/interface/KeyWord.js''></script>
   <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
           $("#search").keyup(function(){
               var key = $("#search").val();
               KeyWord.getName(key,callBack);
           });
           function callBack(data){                  
               $("#result").html("<b>" + data + "</b>");
           }
       });
    
   </script>
</head>
<body>
    <div align="center">
        <img src="img/logo.jpg" style="padding-top:58px;height:350px;width:650px;"><br><br>
        <input type="text" id="search" style="width:600px;height:38px;font-size:20px;font-weight:bold;">
        <input type="button" id="sub" value="Google 搜索" style="height:40px;"><br>
         
        <div id="result"></div>
    </div>
</body>
</html>


三 测试

wKiom1ZZSkiAQfrwAAFhayCU3DQ092.png



本文转自 pangfc 51CTO博客,原文链接:http://blog.51cto.com/983836259/1717724,如需转载请自行联系原作者

相关文章
|
6天前
|
Java 关系型数据库 MySQL
项目实战---构建LAMP、Java Web开发环境(二)
项目实战---构建LAMP、Java Web开发环境(二)
21 0
|
6天前
|
关系型数据库 MySQL Java
项目实战---构建LAMP、Java Web开发环境(一)
项目实战---构建LAMP、Java Web开发环境(一)
23 0
|
8天前
|
弹性计算 Java 关系型数据库
基于ECS搭建Java Web开发环境
基于ECS搭建Java Web开发环境
34 0
|
8天前
|
Java 关系型数据库 MySQL
搭建Java Web开发环境
本教程介绍如何在Linux实例上快速搭建一套Java Web开发环境。
32 1
|
9天前
|
弹性计算 Java 应用服务中间件
手动部署Java Web环境(Alibaba Cloud Linux 2)
本场景带您体验如何在Alibaba Cloud Linux 2.1903 LTS 64位操作系统的云服务器上部署Java Web环境。
21 0
|
11天前
|
前端开发 JavaScript IDE
使用Java实现基于Web的聊天应用
在当今互联网时代,即时通讯成为了人们日常生活中必不可少的一部分。本文将介绍如何使用Java编写一个基于Web的聊天应用程序,使用户能够实时交流。
26 1
|
11天前
|
Java 关系型数据库 MySQL
搭建Java Web开发环境(Anolis OS)
本教程介绍如何在Anolis OS操作系统上快速搭建一套Java Web开发环境。
38 0
|
16天前
|
移动开发 前端开发 JavaScript
Java面试题日积月累(WEB前端20道)
Java面试题日积月累(WEB前端20道)
17 0
|
22天前
|
XML Java 应用服务中间件
【Java】Web应用的文件上传下载
客户端向服务器发送HTTP POST请求,其中包含要上传的文件数据。通常,这是通过HTML表单提交实现的。 Tomcat服务器接收到该请求并将其路由到对应的Servlet。 Servlet通过使用Apache Commons FileUpload库或Java Servlet API提供的multipart/form-data解析器来处理文件上传请求。
|
23天前
|
设计模式 前端开发 Java
使用Java MVC开发高效、可扩展的Web应用
本文将介绍如何使用Java MVC(Model-View-Controller)模式来开发高效、可扩展的Web应用。我们将深入探讨MVC模式的核心概念,以及如何在Java中实现这一体系结构。通过合理地分离业务逻辑、用户界面和数据处理,我们可以构建出易于维护和扩展的Web应用程序。
相关产品
云迁移中心
推荐文章
更多