html从数据库中读取数据

html从数据库中读取数据,第1张

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

以下是一个例子:

html文件suggest.html:

<html>

<head>

<meta http-equiv="content-type" content="text/htmlcharset=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)

{

一般富文本编辑器保存的文章排版都是添加了跟多html或者css代码保存到数据库的,为就是后台预言可以直接从数据库中取出来放到html页面显示那些样式和排版,此时后台读取到带有html标记的数据应该是交给JavaScript,使用JavaScript的一些方法将数据展现在页面上输出。

工具原料:jQuery、编辑器、浏览器

1、首先假设后台读取到的数据通过ajax传给了前端的JavaScript,JavaScript获取的数据后使用html方法将其输出在页面的某个标签中,在这里我们使用模拟数据来代替数据的传输过程,代码如下:

<body>

<script src="libs/jquery/2.1.4/jquery.js"></script>

<div id="div1">

</div>

<script>

var data="<font color='red'>测试数据</font>"//带有html标签的测试数据

$('#div1').html(data)//通过html()方法将数据输出到div中

</script>

</body>

2、运行的效果如下图:

<?php require_once("mysql_class.php")

require_once("sys_conf.inc")

header('Content-Type:text/htmlCharset=GBK')

$link_id=mysql_connect($DBHOST,$DBUSER,$DBPWD)

mysql_select_db($DBNAME) //选择数据库my_chat

$sql="SELECT * FROM `dx_leibie`"

$query = mysql_query($sql)

while($row=mysql_fetch_array($query)){

//print_r($row) //$con=array(array('新闻标题','新闻内容'),array('新闻标题2','新闻内容2')) $title=$row[id_lang]

$content=$row[name]

if(!is_dir("up")) //如果此文件夹不存在,则自动建立一个

{

mkdir("up")

}$up="up/"

echo $path=$up.$row[id_lang].'.htm'

$fp=fopen("tmp.htm","r")//只读打开模板

$str=fread($fp,filesize("tmp.htm"))//读取模板中内容

$str=str_replace("{title}",$title,$str)

echo $str=str_replace("{content}",$content,$str)//替换内容

fclose($fp) $handle=fopen($path,"w")//写入方式打开新闻路径

fwrite($handle,$str)//把刚才替换的内容写进生成的HTML文件

fclose($handle)

//echo "生成成功"

} // unlink($path)//删除文件

?><?php require_once("mysql_class.php")

require_once("sys_conf.inc")

header('Content-Type:text/htmlCharset=GBK')

$link_id=mysql_connect($DBHOST,$DBUSER,$DBPWD)

mysql_select_db($DBNAME) //选择数据库my_chat

$sql="SELECT * FROM `dx_leibie`"

$query = mysql_query($sql)

while($row=mysql_fetch_array($query)){

//print_r($row) //$con=array(array('新闻标题','新闻内容'),array('新闻标题2','新闻内容2')) $title=$row[id_lang]

$content=$row[name]

if(!is_dir("up")) //如果此文件夹不存在,则自动建立一个

{

mkdir("up")

}$up="up/"

echo $path=$up.$row[id_lang].'.htm'

$fp=fopen("tmp.htm","r")//只读打开模板

$str=fread($fp,filesize("tmp.htm"))//读取模板中内容

$str=str_replace("{title}",$title,$str)

echo $str=str_replace("{content}",$content,$str)//替换内容

fclose($fp) $handle=fopen($path,"w")//写入方式打开新闻路径

fwrite($handle,$str)//把刚才替换的内容写进生成的HTML文件

fclose($handle)

//echo "生成成功"

} // unlink($path)//删除文件

?><?php require_once("mysql_class.php")

require_once("sys_conf.inc")

header('Content-Type:text/htmlCharset=GBK')

$link_id=mysql_connect($DBHOST,$DBUSER,$DBPWD)

mysql_select_db($DBNAME) //选择数据库my_chat

$sql="SELECT * FROM `dx_leibie`"

$query = mysql_query($sql)

while($row=mysql_fetch_array($query)){

//print_r($row) //$con=array(array('新闻标题','新闻内容'),array('新闻标题2','新闻内容2')) $title=$row[id_lang]

$content=$row[name]

if(!is_dir("up")) //如果此文件夹不存在,则自动建立一个

{

mkdir("up")

}$up="up/"

echo $path=$up.$row[id_lang].'.htm'

$fp=fopen("tmp.htm","r")//只读打开模板

$str=fread($fp,filesize("tmp.htm"))//读取模板中内容

$str=str_replace("{title}",$title,$str)

echo $str=str_replace("{content}",$content,$str)//替换内容

fclose($fp) $handle=fopen($path,"w")//写入方式打开新闻路径

fwrite($handle,$str)//把刚才替换的内容写进生成的HTML文件

fclose($handle)

//echo "生成成功"

} // unlink($path)//删除文件

?>用以上先生成一个HTML文件,然后再用require_once("aaa.html")引进来就OK


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/sjk/6743989.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-27
下一篇 2023-03-27

发表评论

登录后才能评论

评论列表(0条)

保存