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

dwr和jquery实现谷歌关键字搜索

猜你在找的Ajax相关文章