ajax实现输入提示
有个项目用到在用户输入的时候，给予一定的提示，提示的内容是从数据库中提取（有中文）。
于是google搜索了下，自己修改了部分代码，与大家分享。
附件内是可在MyEclipse内运行的源码，需要的朋友请自行下载。
首先就是要写数据库操作的类：
DbManager.java
其中表article只有一个字段author，大家可根据自己的需要进行修改。
package com.billows.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
/**
* 数据库管理与操作
* @编写者：Billows.Van
*
*/
public class DbManager {
private Connection conn;
private Statement stmt;
private ResultSet rs;
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost:3306/test";
private static final String USERNAME = "root";
private static final String PASSWORD = "1234";
// 数据库连接
public synchronized Connection getConnection() {
try {
Class.forName(DRIVER);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (ClassNotFoundException e) {
e.printStackTrace();
return null;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
return conn;
}
/**
* 获取符合输入条件的数据
* @param conn
* @param sql
* @return
*/
public String searchSuggest(String param) {
String sql = "select author from article where author like '" + param + "%' order by author";
String author = "";
String str = "";
try {
conn = this.getConnection();
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while (rs.next()) {
author = rs.getString("author");
str += author + "#";
}
} catch (SQLException e) {
e.printStackTrace();
return "";
}
return str;
}
}
然后是相应ajax的Servlet：
SuggestAction.java
package com.billows.web.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.billows.db.DbManager;
/**
* Ajax相应的Servlet
* @author Billows.Van
*
*/
public class SuggestAction extends HttpServlet {
private static final long serialVersionUID = -2522652273202051650L;
private DbManager dbManager;
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
String param = "";
if(request.getParameter("txtValue") != null)
param=request.getParameter("txtValue");
dbManager = new DbManager();
String result = dbManager.searchSuggest(param);
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
}
}
下面就是web.xml的写法了
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>autoSuggest</servlet-name>
<servlet-class>com.billows.web.action.SuggestAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>autoSuggest</servlet-name>
<url-pattern>/suggest</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
最后是jsp页面的内容：
index.jsp
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX输入自动提示</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/autosuggest.js"></script>
</head>
<body>
<input type="text" style="font-family:verdana;width:300px;font-size:12px" id="tb" value="" />
<script> new actb("tb", loadAllMessage("suggest" , ""), null); </script>
</body>
</html>
其中用到的autosuggest.js在附件内，需要的朋友可以下载查看。