展开全部

html只能通过ajax接口跟后台数据库接口通信，然后取出来的数据在页面上显636f70793231313335323631343130323136353331333337626135示。

以下是一个例子：

html文件suggest.html：

body {

font: 11px arial;

}

.suggest_link {

background-color: #FFFFFF;

padding: 2px 6px 2px 6px;

cursor:hand;

}

.suggest_link_over {

background-color: #E8F2FE;

padding: 2px 6px 2px 6px;

}

#search_suggest {

position:relative;

background-color: #FFFFFF;

text-align: left;

border: 1px solid #000000;

left: -12px;

top: 1px;

height: 74px;

width: 170px;

display:none;

}

实现搜索提示

ajax_search.js：

var searchReq = createAjaxObj();

function createAjaxObj()

{

var httprequest=false;

if (window.XMLHttpRequest) //为非IE浏览器生成XmlHttpRequest对象

{

httprequest=new XMLHttpRequest()

if (httprequest.overrideMimeType) httprequest.overrideMimeType('text/xml')

}

else if (window.ActiveXObject) //为IE浏览器生成XmlHttpRequest对象

{

try

{

httprequest=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

try

{

httprequest=new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e){}

}

}

return httprequest

}

function searchSuggest()

{

if (searchReq.readyState == 4 || searchReq.readyState == 0)

{

var str = escape(document.getElementById('txtSearch').value);

searchReq.open("GET", 'search?search=' + str, true);//向服务器端发送请求

searchReq.onreadystatechange = handleSearchSuggest; //设置回调函数

searchReq.send(null);

}

}

function handleSearchSuggest()

{ //这是回调函数，处理从服务器端返回的信息

if (searchReq.readyState == 4)

{

var ss = document.getElementById('search_suggest')

ss.innerHTML = '';

var str = searchReq.responseText.split("\n");

for(i=0; i < str.length - 1; i++)

{

var suggest = '

';

ss.innerHTML += suggest;

ss.style.display="block";

}

}

}

function suggestOver(div_value)

{

div_value.className = 'suggest_link_over';

}

function suggestOut(div_value)

{

div_value.className = 'suggest_link';

}

function setSearch(value)

{

document.getElementById('txtSearch').value = value;

document.getElementById('search_suggest').innerHTML = '';

document.getElementById('search_suggest').style.display="none";

}

servlet文件SearchSuggest.java：

package com;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class SearchSuggest extends HttpServlet

{

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, java.io.IOException

{

response.setCharacterEncoding("UTF-8");

String search = request.getParameter("search"); //接受参数值

String sql = "select GoodsName from Goods where GoodsName like '"+search+"%' order by GoodsName";//设置查询语句

Connection conn = null;

Statement stmt = null;

ResultSet rs = null;

ArrayList vData = new ArrayList();

java.io.PrintWriter out = response.getWriter();

try {

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); //注册数据库连接驱动

String MdbPath = "F:/sneaker/Tomcat/webapps/search/database/#costume.mdb";

String url= "jdbc:odbc:driver={Microsoft Access Driver (*.mdb)};DBQ=" + MdbPath ;

conn = DriverManager.getConnection(url);

stmt = conn.createStatement();

rs = stmt.executeQuery(sql); //执行查询

while (rs.next())

{

vData.add(rs.getString("GoodsName"));

}

StringBuilder buf = new StringBuilder();

for (int i=0;i

{

String keyword = (String)vData.get(i);

buf.append(keyword+"\n");

}

out.print(buf.toString());//向客户端输出信息

} catch (Exception e) {

e.printStackTrace();

} finally {

try {

if (stmt != null)

stmt.close();

if (conn != null)

conn.close();

} catch (SQLException sqle) {

}

}

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, java.io.IOException

{

doPost(request, response);

}

}

已赞过

已踩过<

你对这个回答的评价是？

评论

收起