dwr和jquery实现谷歌关键字搜索
2015-05-17 09:41
465 查看
创建web项目，添加Struts2支持并将mysql驱动，dwr文件导入，导入jquery的js文件和google的logo图片。
1.实现DAO，在src下创建名为dao的包，并在其中创建名为Db.java的类，该类如下：
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class Db {
static {
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public static Connection getConnection() {
Connection con = null;
String url = "jdbc:mysql://127.0.0.1:3306/test";
String userName = "root";
String pwd = "root";
try {
con = DriverManager.getConnection(url, userName, pwd);
} catch (SQLException e) {
e.printStackTrace();
}
return con;
}
public ResultSet getKeyWord(String key){
String sql = "select name from google where name like \""+key+"%\"";
System.out.println(sql);
Connection con = getConnection();
ResultSet rs =null;
Statement stm = null;
try {
stm = con.createStatement();
rs = stm.executeQuery(sql);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return rs;
}
}
方法getKeyWord通过传递过来的关键字，实现模糊查询。最终返回rs对象，后边的Action类调用时，会将这个结果集
对象rs转换为list对象，然后让前台的Javascript调用输出结果。
其中，表google创建语句如下：
create table google(id int primary key auto_increament,name varchar(32) not null);
插入测试的数据：
insert into google(name) values("aaa");
insert into google(name) values("bbb");
insert into google(name) values("ccc");
insert into google(name) values("abc");
insert into google(name) values("aredsc");
insert into google(name) values("sieln");
insert into google(name) values("aba");
2.实现Action:项目中的Action类实现的是一个调度的功能。在src目录下创建一个Action包，并在其中创建名问
KeyAction.java的类，如下：
package action;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.opensymphony.xwork2.ActionSupport;
import dao.Db;
public class KeyAction extends ActionSupport {
private static final long serialVersionUID = 1L;
public List getName(String key) throws SQLException {
Db db = new Db();
ResultSet rs = db.getKeyWord(key);
List list = new ArrayList();
ResultSetMetaData md = rs.getMetaData();
int columnCount = md.getColumnCount(); // Map rowData;
while (rs.next()) {
Map rowData = new HashMap();
for (int i = 1; i <= columnCount; i++) {
rowData.put(md.getColumnName(i), rs.getObject(i));
}
list.add(rowData);
}
return list;
}
}
KeyAction.java主要的作用是调度到层的Db.java类，获取数据库查询的结果集并将结果集转换成list对象，通过
dwr以供JavaScript调用。并使用Jquery显示。可以看出这个Action提供了一个getName方法，它根据参数（这个参
数是视图页面中通过JavaScript传入的）做查询并将结果集转换为list对象返回。
index.jsp实现视图：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Struts2 Ajax Google</title>
<script type='text/javascript' src='/struts2ajaxgoogle/dwr/engine.js'></script>
<script type='text/javascript'
src='/struts2ajaxgoogle/dwr/interface/KeyWrod.js'></script>
<script type="text/javascript" src="jq/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#serch").keyup(function() {
var key = $("#serch").val();
KeyWrod.getName(key, callback);
});
function callback(date) {
var key = "";
for(i=0;i<date.length;i++){
key = key+date[i].name+"<br>";
}
$("#result").html("<b>"+key+"</b>");
}
});
</script>
</head>
<body>
<center>
<img src="img/logo_cn.png" style="padding-top: 58px;">
<br>
<br>
<input type="text" id="serch"
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>
</center>
</body>
</html>
Jquery获取搜索框中的输入，然后交给dwr。dwr调用Action中的getName方法，并将参数传递给getName方法，最终Action会
返回给dwr一个list，dwr会将list交给Jquery显示出来。
web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<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>
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
dwr.xml配置：
<?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="KeyWrod">
<param name="class" value="action.KeyAction" />
<include method="getName"/>
</create>
</allow>
</dwr>
dwr.xml中指定生成的JavaScript名称是keyWord,在视图的页面中可以通过这个名称来调用KeyAction.java中的方法。<include method="getName">
指定getName方法才可以被dwr调用，其他的访问不到。到这里已经全部完成了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现搜索页面关键字的功能
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- 基于jQuery实现搜索关键字自动匹配功能
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- jQuery实现搜索关键字自动匹配提示方法
- jQuery实现页面关键字搜索
- jquery实现页面关键字搜索定位
- jQuery实现搜索关键字自动匹配提示方法
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- JQuery+JS实现仿百度搜索结果中关键字变色效果
- jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
- 基于jQuery实现搜索关键字自动匹配功能
- jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
- jQuery实现简单前端搜索功能
- html+css+jquery实现折叠板(模仿搜索风云榜折叠板)
- [原创]jQuery实现搜索框自动完成功能
- jQuery+ajax实现搜索下拉菜单
- 在 Angular 中实现搜索关键字高亮
- PHP实现获取百度top50的搜索排行关键字
- jQuery中利用keyup事件和判断是否为汉字来实现动态搜索