html读mysql数据_html从数据库中读取数据
展开全部
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 = '
suggest += 'οnmοuseοut="javascript:suggestOut(this);" ';
suggest += 'οnclick="javascript:setSearch(this.innerHTML);" ';
suggest += 'class="suggest_link">' + str[i] + '
';
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);
}
}
已赞过
已踩过<
你对这个回答的评价是?
评论
收起
html读mysql数据_html从数据库中读取数据相关推荐
- 我刚做的一个TreeView的CheckBox进行选中插入数据库,从数据库中读取数据后让CheckBox勾选的代码!...
#region 绑定角色 /// <summary> /// 绑定权限信息 /// </summary> protected void Bind ...
- 基于JDBC从数据库中读取数据,在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点 一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据 见"JSP基于JDBC操作MSSQL ...
- java实现k-means算法(用的鸢尾花iris的数据集,从mysq数据库中读取数据)
k-means算法又称k-均值算法,是机器学习聚类算法中的一种,是一种基于形心的划分方法,其中每个簇的中心都用簇中所有对象的均值来表示.其思想如下: 输入: k:簇的数目: D:包含n个对象的数据集. ...
- web项目实践1-iwebshop项目-页面初始化数据与sql数据库中的数据对比
当拿到项目后首先应该根据页面初始化数据与SQL数据库中的查询数据进行比对,进行初始化界面测试 初始化页面数据加载分析 1.查询首页的顶级分类 select * from iwebshop_catego ...
- 【存储过程】从数据库中读取数据保存到文件中
2019独角兽企业重金招聘Python工程师标准>>> 由于初期规划不好,项目管理的action都存入到数据库中了,而实际上应该以配置文件的形式保存的,所以现在想改过来.一条条复制是 ...
- 使用python实现微博评论分词与关键词提取(从MySQL数据库中读取数据)
一.实验环境 (1)Windows操作系统: (2)PyCharm 2019.1. (3)数据库用户名为 root,密码为 123456. (4) 学校机房电脑,带有mysql 二.获取数据库信息 ...
- PHP从数据库中读取数据并打印
示例如下: $con=mysql_connect('localhost','root','');//数据库信息 mysql_select_db('shop');//数据库名 mysql_query(& ...
- 不用sqlDataSet如何从后台数据库中读取数据
注意:要引用System.Data.SqlClient -----------引用部份如下------------------------ uses System.Collections, Sys ...
- python文件读取数据-Python从文件中读取数据
一.读取整个文件内容 在读取文件之前,我们先创建一个文本文件resource.txt作为源文件. resource.txt my name isjoker, I am18years old, How ...
最新文章
- Java学习总结:56(Stack子类)
- R语言使用ggplot2包使用geom_boxplot函数绘制基础分组箱图(输出多个分组、自定义颜色配置)实战
- JStorm与Storm源码分析(二)--任务分配,assignment
- 微博客户端播放器的演进之路
- 未来大数据的处理和发展的五个趋势
- linux make命令_第一章 1.3Linux下安装Redis
- poxtfix+dovecot+saslauthd+courier-authlib +mysql + extmail 完整虚拟邮箱系统部署
- cursor用法java,Cursor的基本使用方法
- python ssh shell交互_使用Paramiko在Python上用ssh实现交互式shell?
- powerbi视觉对象_Power BI 视觉对象词云WordCloud
- Cassandra操作入门
- 小括号教学设计导入_【干货】教学设计万能模板已到达,各科都能用!
- boost python错误_Ubuntu-链接boost.python-致命错误:找不到pyconfig
- 圆柱体积怎么算立方公式_圆柱体积怎么算立方 高为3米则此圆柱的体积为27
- 如何搭建一套业务、数据一体化的数据指标体系
- JS中this是什么
- 图片base64解码转换
- 【Flutter 问题系列第 26 篇】给 TextField 添加背景色,为什么没有效果 ?
- 函数简介篇——环境变量函数
- map拼接URL参数
热门文章
- 4月数据库流行度排行:深陷裁员风波的Oracle持续增长股价获新高
- 中国 AI 开发者真实现状:人才依赖海外引进,本科 AI 教育盛行
- 2017 前端大事件和趋势回顾,2018 何去何从?
- RocketMQ如何应对每天1500亿条的数据处理
- python字符串筛选输出_「每日一练」巧用Python对字符串进行筛选
- MATLAB分子微纳模拟,FDTD/MODE/DEVICE/Interconnect 微纳光电子模拟
- jvm调优工具_JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用
- 安卓 camera 调用流程_音视频开发之旅(四)Camera视频采集
- 队列消息在html中怎么排列,Redis实现消息队列
- 全国计算机一级考试网络知识,全国计算机等级考试一级网络基础知识复习题及答案.doc...