本篇博文写到的小程序完整代码下载地址：http://download.csdn.net/detail/yanglun1/8785865
上一篇简单的介绍了DWR开源框架的运用，这篇博文也用到了一点DWR的知识，包括DWR的配置在此不多提了，有不清楚的请翻看上一篇博文的详细讲解。这篇博文要实现的小程序是根据用户输入字符，动态更新关键字。
实现的具体效果直接上截图：
截图二：
截图三：
上来先罗列三张截图，这样比口头表达的要清晰一些吧，下面我们就来看一下具体的代码实现：
首先，要知道我们的需要获取的数据来自哪里，我们是通过数据库获得的数据。当数据库中没有数据的话，用户点击搜索也会自动添加到数据库（好吧，这个是后来想到的，不过没有在代码中实现，其实实现起来也不是很难，在此提一下，具体的实现还请读者自行解决吧）。如果数据库中有字符和用户输入的数据相匹配就将匹配的所有数据罗列起来，如果用户看到自己想要的就可以直接点击，不用输入，提高了人机交互能力。
又说了一堆废话，好吧，我们还是赶紧写代码吧，要不读者该烦了。既然用到了数据库就肯定要有数据库读取文件，在此我就直接复制部分代码过来吧：
package com.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public classDao {
static {
try {
Class.forName("com.mysql.jdbc.Driver");
}catch(ClassNotFoundException e) {
e.printStackTrace();
}
}
public static ConnectiongetConnection() {
Connectioncon = null;
Stringurl = "jdbc:mysql://localhost:3306/mysql";
StringuserName = "root";
Stringpwd = "root";
try {
con= DriverManager.getConnection(url, userName, pwd);
}catch(SQLException e) {
e.printStackTrace();
}
return con;
}
public ResultSetgetKeyWord(String key){
Stringsql = "select name from help_keyword wherename like \""+key+"%\"";
System.out.println(sql);
Connectioncon = getConnection();
ResultSetrs =null;
Statementstm = null;
try {
stm = con.createStatement();
rs= stm.executeQuery(sql);
}catch(SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return rs;
}
}
然后就是我们需要的核心代码了，我们给它命名为KeyAction.java
public classKeyAction extends ActionSupport{
public ListgetName(String key) throws SQLException {
Daodb = newDao();
ResultSetrs = db.getKeyWord(key);
Listlist = newArrayList();
ResultSetMetaDatamd = 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);*/
list.add(rs.getString("name"));
}
return list;
}
}
最后看一下我们的视图界面代码：
<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">
<html>
<head>
<title>Struts2 Ajax Google</title>
<script type='text/javascript' src='/GoogleAutoPrompt/dwr/engine.js'></script>
<script type='text/javascript'
src='/GoogleAutoPrompt/dwr/interface/KeyWrod.js'></script>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#serch").keyup(function() {
var key = $("#serch").val();
if(key.length!=0){
KeyWrod.getName(key,callback);
}else{
$("#result").html("");
}
});
function callback(date) {
var key = "";
for(i=0;i<date.length;i++){
/* key = key+date[i].name+"<br>"; */
key= key+date[i]+"<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>
这么大一堆代码，其中最主要的就是那个蓝色背景的一行最为关键，也就是我们用到DWR的地方。
基本上主要的实现代码就是这样的，整个程序的具体配置，还请另行下载查看，在此不再啰嗦，力求每篇博文做到最简洁，还请见谅。
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
