HTML页面获取数据库数据_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：141,807贴子：
HTML页面获取数据库数据收藏
HTML是怎么获取数据库数据的。有没有详细点的方案啊
javascript 在线咨询领取笔试题目和试听资料!海同科技是您贴心的IT培训机构!上海海同科技:包食宿,零压力,模拟面试,轻松入职百强企业!
如果是指伺服器端的数据库，只能经由伺服器端的实作拿，HTML 是拿不到的。
用php很简单
&script type=&text/javascript& src=&jquery.js&&&/script&&script&$(function(){$(&#date_change&).click(function(){htmlobj=$.ajax({type:GET,url:&ajax/mytest&, async:false,data:&txt&,dataType:&txt&,success: function(data){$(&#mydiv&).html(htmlobj.responseText);}})})})
语法就是这样。结果是只弹出了一个提示框。url路径在浏览器打开的时候没有问题。服务器也有点击断点。
需要服务器语言～然后ajax
没有后台调用不到数据库。
html5支持本地WebSQL和IndexedDB，不过不推荐，要获取伺服器端数据，需要后端配合，
楼主你确定ajax能操作数据库？溜啊，项目分为前端，业务端，和后端，ajax是前端和业务端交互，不可以拿数据库的数据，要业务端比如php java node这些需要难道数据库的数据，然后前端通过ajax再拿到业务端的数据，然后显示到页面！ok？
「达内WEB培训学院」,课程全面覆盖html5/CSS/JavaScript/JQuery/Bootstrap等技术!美国上市教育机构,达内javascript培训,毕业名企内部推荐就业,支持就业后付款!
为什么我按你4楼的写法 ，数据返回在error函数里，只能在加载函数里使用。
用asp jsp php吧 ，或者websocket？
up主的开发环境是什么？ php
取数据不难，不用ajax 也行，主要看用什么平台 开发
还是用PHP吧！
$(function(){
$.getJSON(&url&,
function(data){
alert(data)
});});跨域请求数据方法。
楼主如果弄好了，跪求指点我一下，我也遇到了这个情况
我是刚会用dreamweaver搭一搭界面，js+jq都只学了一点，我还能用各种语言写helloworld！
ajax调用php文件，用php连接数据库，然后反回给html文件
不用ajax用jQuery的$.get()或者$.post()都可以
不管怎么样，都得用服务器语言
用php写一个 html文件，然后就等于你从html上拿到数据库内容了其实楼主可以学习node.js
无阻塞简直不要太开心，你会上瘾的
获取后台数据，显示在页面上。现在后台数据，是从一条链接上获得？不知道我说的你理解没？
type:&post&, url:&&,//你请求数据的地址，就是你说的那个链接。
data:&&,//你传递到后台的参数，如果不需要可以不填。
dataType:&json&,//数据格式
success: function(data){
//执行获取到数据后的操作，在页面显示。
$.get( &http：//192.168.1.1/？xxxxx&, function ( result ){alert( result )})
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或> 博客详情
&&&&& 这几天一直被 ajax请求成功，返回了数据，但是不进success的问题困扰着，怎么弄就是解决不了，总以为是：$(document).ready(function(){});没起作用，一直找页面加载的方法来试，整了好几天没整出来....今天比较幸运，在网上找到了一篇关于这方面问题的文章，按上面的方法一试，果然ok了，哈哈哈，真是太高兴了....终于解决这个问题了。
这个问题的原因（来自/ajax/413061.html的拷贝内容）：
--------------------------拷贝内容 start ----------------------------------------------------
“ & 1.状态码返回200--表明服务器正常响应了客户端的请求； &&&&& 2.通过firebug和IE的httpWatcher可以看出服务器端返回了正常的数据，并且是符合业务逻辑的数据。 & & & & && 但是，程序就是不进入到回调函数success: function(data){****}而是进入到error: function(data){***} & & 记得上次是因为存在跨域访问的问题导致。这次查看不存在跨域的问题。此时就很是不解。 &&&&&&&&& 事情的来源是这样的： 后台的配置管理模块中有一块是关于国际化的配置，增加国际化描述等等，查询国际化描述。 &&&&&&&& 问题的来源是在输入key='a' 查询前十条数据时发现可以正常的展现数据，但是当我输入key值为z时，并且再查询前20条数据是发现数据不能展现，但是server返回了数据库中的数据。这时第一反应是事不时数据返回的有问题，粗略的检查了返回的数据发现和第一次查询没有什么明显的区别。但是只查询第十四条数据时发现，显示不出来。这时候就开始怀疑了数据问题，进而到数据库中查找第十四条数据没有发现什么特别的地方。 &&&& 这时开始怀疑，难道是JS程序有处理数据兼容性有问题，觉得甚是不可思议。整了大约半小时，越来越觉得不大可能。就放弃了这种想法。 &&&& 有转向，重新审视数据。 但是发现数据从中间换行了，没太在意。 在纠结了一会儿后问一同事，指出数据可能多了一个"回车键"，在其指点下到数据库表中再次查看该条数据发现有一个字段的值多了一个"回车键"。删除后，一切恢复正常。 &&&& 思考第一次和第二次碰到的问题，我初步认识到： &&& 1. 返回的数据类型一定要符合定义的数据类型。即如果你定义的 dataType 是 json 类型的，那么返回来的数据一定是 json 才可以，平且不然就会执行 error 里的程序块儿。 && (1) 同时需要特别的注意返回的JSON数据是否是严格的JSON格式. && (2) 也应该严重关切当后台返回的是一个List 数据（List当中的数据是Json格式）时，有没脏数据即不是严格的JSON格式。 &&& 很隐蔽的可能是数据某一个字段中在开始或末尾含有特殊字符，以"回车键"、"Tab键"等 &&& 这类隐蔽错误的规避措施就是好的编程习惯： a. 对于在页面填写入库的数据最好强制性的做，去空操作&利用客户端最好&。 b. 特殊的业务需注意特殊字符。 && 这样还不够，因为在开发过程中测试或开发人员自己在数据库中手动添加数据，可能会多加了空格等，导致程序调试，测试带来了麻烦。 这时就需要考虑在后台代码对获取的数据做处理。 &&&&& 2. 原因是ajax请求跨域了，解决方法是在两个文件里都添加一段 js: [/b]document.domain，或者采用Jsonp的方式，如我的前一篇blog中提到的。 还有一点对JQuery 中Ajax的一点其它的认识： 客户端发起请求，得到服务器端的相应是200，&正确拿到服务器响应的数据&没有问题.此时在判断进入success 对应的回调函数还是进入到error对应的回调函数之前，可能会校验一些东西： &&&&& 1. 返回的每条数据是否是dataType中定义的数据类型。如果有部分数据不是或者哪怕一条数据没有严格的按照dataType定义的类型，程序就会进入到error:function(){****} &&&&& 2. 请求的域和当前域是否是同一域，如果不是同一域也十分有可能进入error:function(){***}&& ”&
&---------------------------end --------------------------------------------------------------------------
&&& &&& 通过看了这段内容后，我再对照我的ajax 看了一遍，发现我少配了一个属性（dataType属性）因为我数据类型返回的是json类型，而我这边没有配dataType:'json',这一属性，所以导致出现了此问题。不过， 困扰我这么久的问题终于解决了，下次得万分小心才是，该配置的东西还是得配置，不能偷懒。
人打赏支持
参与源创会
领取时间：
“”在线下联结了各位 OSCer，推广开源项目和理念，很荣幸有你的参与~
领取条件：参与过开源中国“源创会”的 OSCer 可以领取
码字总数 13017
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥html文件利用ajax方法 通过servlet文件 访问数据库 获取提示。汉字无法匹配？ - ITeye问答
Access数据库Goods表：
html文件suggest.html：
&html&
&head&
&meta http-equiv="content-type" content="text/ charset=UTF-8"&
&script language="JavaScript" type="text/javascript" src="ajax_search.js"&&/script&
&style type="text/css" media="screen"&
.suggest_link {
background-color: #FFFFFF;
padding: 2px 6px 2px 6
.suggest_link_over {
background-color: #E8F2FE;
padding: 2px 6px 2px 6
#search_suggest {
background-color: #FFFFFF;
text-align:
border: 1px solid #000000;
height: 74
width: 170
&body background="bg.gif"&
&h3&实现搜索提示&/h3&
&div style="width: 500"&
&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&
&/body&
&/html&
ajax_search.js：
var searchReq = createAjaxObj();
function createAjaxObj()
{
&& var httprequest=
&& 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 = handleSearchS //设置回调函数
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 +=
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 =
document.getElementById('search_suggest').innerHTML = '';
document.getElementById('search_suggest').style.display="none";
}
servlet文件SearchSuggest.java：
import java.sql.C
import java.sql.DriverM
import java.sql.ResultS
import java.sql.SQLE
import java.sql.S
import java.util.ArrayL
import javax.servlet.ServletE
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
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 =
Statement stmt =
ResultSet rs =
ArrayList vData = new ArrayList();
java.io.PrintWriter out = response.getWriter();
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=" + MdbP
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 {
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时，可以匹配：
当输入汉字儿童 或 额 时，匹配信息没有显示，是因为所输入的汉字编码有误吗，没有传递或传递后编码不匹配吗？求解？
js方法：function searchSuggest()需要进行改造。&
searchReq.open("GET", 'search?search=' + str, true);//向服务器端发送请求
searchReq.onreadystatechange = handleSearchS //设置回调函数
searchReq.send(null);
上面三行代码改为如下：
searchReq.open("GET", 'search', true);//向服务器端发送请求
searchReq.onreadystatechange = handleSearchS //设置回调函数
searchReq.send("search=" + str);
已解决问题
未解决问题