首先是一个ajax请求的例子
<ul id="listul"></ul>
<script type="text/javascript">
ajax({
type:'GET',
url:'data.php',//数据地址
data:'',
success:function(res){
var result=JSON.parse(res);
show(result);
}
});
function show(result){
var str="";
for(var i=0;i<result.length;i++){
for(var j=0;j<result[i].length;j++){
str+='<li class="sy-news-border"><a href='+result[i][j].url1+'>'+result[i][j].dec+'</a><span>'+result[i][j].time+'</span></li>';
document.getElementById("listul").innerHTML=str;
}
}
}
</script>
ajax.js是我自己封装的一个插件
function ajax(myjson){
var xmlhttp;
if(window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
};
var type=myjson.myjson;
var url=myjson.url;
var data=myjson.data;
var success=myjson.success;
xmlhttp.open(type,url,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.status==200&&xmlhttp.readyState==4){
success(xmlhttp.responseText);
}
}
}
php数据
<?php
header('content-type:text/html;charset="utf-8"');
$news=array(
array(
array( 'time'=>'[2014-07-04]','url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'2017年春拍Top10:那些价值过亿的拍品','url2'=>'http://finance.qq.com/money/cbt/index.html' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'用篮球说话 男篮那些不该发生的闹剧','url2'=>'http://sports.qq.com/a/20170811/003424.htm#p=1' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'章子怡拍大片只有一个背景 演绎东方美人', 'url2'=>'http://fashion.qq.com/a/20170811/020952.htm' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'杨幂陈乔恩教你大胸妹子如何秒杀平胸妹', 'url2'=>'http://fashion.qq.com/a/20170811/021179.htm' ),
),
array(
array( 'time'=>'[2014-07-04]','url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'2017年春拍Top10:那些价值过亿的拍品','url2'=>'http://finance.qq.com/money/cbt/index.html' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html', 'dec'=>'用篮球说话 男篮那些不该发生的闹剧','url2'=>'http://sports.qq.com/a/20170811/003424.htm#p=1' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'章子怡拍大片只有一个背景 演绎东方美人', 'url2'=>'http://fashion.qq.com/a/20170811/020952.htm' ),
array( 'time'=>'[2014-07-04]', 'url1'=>'http://finance.qq.com/money/cbt/index.html','dec'=>'杨幂陈乔恩教你大胸妹子如何秒杀平胸妹', 'url2'=>'http://fashion.qq.com/a/20170811/021179.htm' ),
)
);
echo json_encode($news);
?>
好了这就是ajax交互。就是通过ajax方法将数据写进前端的页面里面
接下来说说数据库的数据获取。怎样写到前端页面里面
<?php
$link=mysqli_connect("localhost","root","root");
if(!$link){
exit("数据库链接失败");
}
mysqli_set_charset($link,"utf8");
mysqli_select_db($link,"news");
$sql="select * from data where id<=8";
$res=mysqli_query($link,$sql);
echo "<ul>";
while($rows=mysqli_fetch_assoc($res)){
echo "<li class='sy-news-border'>";
echo "<a href='sfgk-detail.html' class='dynamic-news'>";
echo $rows["title"];
echo "</a>";
echo "<span>".$rows["time"]."</span>";
echo "</li>";
}
echo "</ul>";
echo "</tbody></table>";
mysqli_close($link);
?>
将上面的代码写进你要在页面中布局的地方,当然关于样式的问题,自己去定义。在这里不多述。
这里只是用的mysqli的方法访问数据库,数据库还有其他的方法访问。