dwr和jquery实现骨骼关键字搜索

创建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调用,其他的访问不到。到这里已经全部完成了。

时间: 2024-12-19 08:32:41

dwr和jquery实现骨骼关键字搜索的相关文章

Jquery实现页面关键字搜索

<style type="text/css"> .highlight { background-color:yellow; } </style> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript"> $(document).ready(fu

jquery实现页面关键字搜索定位

页面上存在一个搜索框,输入关键字之后,点击查询,页面上关键字会黄色高亮显示,不断点击查询,红色高亮会逐个下移. <script> var num=0;//记录第几次点击查询框 function highLight(){ var keywork = $("#keyword").val();//输入框的值 var test=$("#text").textSearch(keywork); var arr=$("span"); var spa

纯客户端页面关键字搜索高亮jQuery插件

一.效果抢鲜展示 此插件是我今天下午写的,为了直观地看到是个什么东东,先展示效果,您可以狠狠地点击这里:搜索页面文字jQuery插件Demo 下图为Demo页面的两个测试截图 – 测试页面HTML代码取自豆瓣网帮助页面: 下载 您可以狠狠地点击这里:jquery.textSearch-1.0.js 文件较小,功能简单,恕不打包~~ 二.功能简述 从上图也应该看出来了,就是对HTML页面上的文字内容进行高亮标记,这个可以用在内容搜索上.纯粹的客户端程序,与后台一点瓜葛都没有. 三.如何使用 使用方

《新浪微博自动评论软件&#183;设计与实现之关键字搜索篇》

任务:进行关键字搜索,对结果批量评论 通过GET请求来获取搜索页面,其url:http://s.weibo.com/weibo/keyword&Refer=STopic_box.其中keyword为搜索关键字. 利用Python的RegEx解析网页,获取每条微博的mid. 手动对一条微博发送评论,抓取其数据包,分析其中各个参数及其作用以便在程序中对其进行更改模拟,其中包括但不限于Cookie字段以及POST参数mid.content. 利用Python编写程序模拟3中的情况重新提交POST请求,

第一百一十节,jQuery EasyUI,SearchBox(搜索框)组件

jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组件依赖于 MenuButton(按钮)组件. 一.加载方式

JSON 之 SuperObject(16): 实例 - 解析 Google 关键字搜索排名

同上例类似, 通过 'http://clients1.google.cn/complete/search?&q=' + "关键字" 可以获取 Google 的关键字搜索排名. 我用 Delphi 为关键字得到的结果是: window.google.ac.h( ["Delphi",[ ["delphi 教程", "375,000 结果", "0"], ["delphi盒子", &q

关键字搜索秒杀精良官方系统

关键字搜索秒杀精良官方系统

高德地图关键字搜索

EditText startTextView=(EditText) findViewById(R.id.car_search_et); startTextView.addTextChangedListener(new TextWatcher() { @Override public void onTextChanged(CharSequence s, int start, int count, int after) { String newText = s.toString().trim();

XE3随笔18:实例 - 解析 Google 关键字搜索排名

同上例类似, 通过 'http://clients1.google.cn/complete/search?&q=' + "关键字" 可以获取 Google 的关键字搜索排名. 我用 Delphi 为关键字得到的结果是: window.google.ac.h( ["Delphi",[ ["delphi 教程", "375,000 结果", "0"], ["delphi盒子", &q