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;@Overrideprotected 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在附件内，需要的朋友可以下载查看。
页:
[1]