-
html文件利用ajax方法 通过servlet文件 访问数据库 获取提示。汉字无法匹配?0
Access数据库Goods表:
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=0;i<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);
}
}
效果当输入为空时,可以调出数据表中所有信息 汉字及数字正常显示:
当输入数字7时,可以匹配:
当输入汉字儿童 或 额 时,匹配信息没有显示,是因为所输入的汉字编码有误吗,没有传递或传递后编码不匹配吗?求解?
2013年4月07日 15:01
1个答案 按时间排序 按投票排序
-
js方法:function searchSuggest()需要进行改造。
searchReq.open("GET", 'search?search=' + str, true);//向服务器端发送请求
searchReq.onreadystatechange = handleSearchSuggest; //设置回调函数
searchReq.send(null);
上面三行代码改为如下:
searchReq.open("GET", 'search', true);//向服务器端发送请求
searchReq.onreadystatechange = handleSearchSuggest; //设置回调函数
searchReq.send("search=" + str);2013年4月07日 15:39
相关推荐
Jsp数据库二级联动原理利用AJAX访问servlet来完成
ajax异步文件上传,servlet处理
用IDEA做的,java新手研究的ajax访问servlet,html获取后台数据,有注释,非专业代码,网上搜索自己研究的,有错请大神指正。 html+java+js+ajax+serlet
servlet+ajax搜索提示。 仿Google Suggest,使用ajax技术实现动态获取搜索提示的功能,当输入搜索关键字时,自动向服务器发送请求,查询相关的关键字,并及时提示用户可输入的关键字。
ajax 聊天系统 servlet 不用数据库
ajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servletajax+servlet
利用Ajax和Servlet实现文件上传,用来commons-fileupload和commons-io两个包。这两个包也在里边。东西做的很简单,但重点是能对这个方法有所了解就行了,有人想做的更炫的可以自行修改。希望能对大家有所帮助。如果...
使用Ajax+servlet技术模拟搜索框智能提示。
Ajax + Servlet 实现上传文件进度条显示
原生ajax+servlet实现智能提示框
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和...基于ajax+jsp+servlet+mysql利用IDEA实现的图书管理系统源码+数据库.zip
又一个Ajax+ASP输入框搜索提示,带Access数据库,本程序亮点是它可以根据你输入的关键词判断数据库是否已经存在,若不存在就将此关键词写入数据库,这样实际上是由用户帮你充实的资料库;本程序没有用到AJAX框架,...
使用Struts2和jQuery EasyUI实现简单CRUD系统,从零开始,从基础的ajax与Servlet的交互开始。
实现流程:获取项目文件夹所有文件,并以列表形式显示在页面上,可选择性下载
spring 与 jquery ajax 交互 和 servlet 与jquery ajax交互
html+Servlet+ajax实现登录和修改,避免了JSP数据验证提示的问题。
通过ajax+servlet实现搜索智能框提示 异步加载
本案例使用Servlet+Ajax实现搜索框智能提示,仿百度智能提示。
Ajax+Servlet 实例 如何创建IE7兼容的AJAX请求 乱码解决
纯小白