html只能通过ajax接口跟后台数据库接口通信，然后取出来的数据在页面上显示。
以下是一个例子：我这里有个大牛聚集地，前面九七三中间打四五四后面两个零，组合起来就行了。
html文件suggest.html：<html>
<head>
<meta http-equiv="content-type" content="text/html charset=UTF-8">
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
<style type="text/css" media="screen">
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
}
</style>
</head>
<body background="bg.gif">
<center>
<h3>实现搜索提示</h3>
<div style="width: 500px">
<input type="text" id="txtSearch" name="txtSearch" onKeyUp="searchSuggest()" autocomplete="off" />
<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索"/><br />
<div id="search_suggest"></div>
</div>
</center>
</body>
</html>
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 = '<div onmouseover="javascript:suggestOver(this)" '
suggest += 'onmouseout="javascript:suggestOut(this)" '
suggest += 'onclick="javascript:setSearch(this.innerHTML)" '
suggest += 'class="suggest_link">' + str[i] + '</div>'
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=0i<vData.size()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)
}
}
在 HTML 页面上显示出有交互的统计图有2种方法：一、用JavaScript做出饼状图或柱形图，需要精通JS代码。
二、利用第三方网站提供的组件：
1、Open Flash Chart是一个开源的Flash制图组件。
2、 XML SWF Charts是一个简单，但强大，利用Flash和动态生成XML数据来产生web chart的工具。
3、 Flotr是一个基于Prototype开发的javascript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。
4、FusionCharts Free是一个制图组件用于创建好看，数据驱动，拥有动画效果的Flash charts。它能够与PHP、Python、Ruby on Rails、ASP、http://ASP.NET、JSP、ColdFusion、HTML页面等一起使用。这个组件是FusionCharts的免费版，但功能仍然很强大。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）