Ajax 次要用于申请服务器的数据
History 次要用于更新浏览器 Url
思路
1、通过 Ajax 申请服务器的数据,渲染到页面
2、通过 History 扭转浏览器的 Url
整个过程就无需刷新页面,然而浏览器地址产生了扭转,并且页面内容也产生了扭转。
index.html
<!DOCTYPE html>
<html>
<head>
<title>AJAX+HISTORY 无刷新网页 </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!-- 整体容器 -->
<div id="content">
<!-- 左侧容器 -->
<div class="left">
<!-- 无序列表 -->
<ul>
<li onclick="getdata(this)" id="安卓"> 安卓软件 </li>
<li onclick="getdata(this)" id="ios">iOS 软件 </li>
<li onclick="getdata(this)" id="破解"> 破解软件 </li>
<li onclick="getdata(this)" id="微信"> 微信相干 </li>
<li onclick="getdata(this)" id="百度网盘"> 百度网盘 </li>
<li onclick="getdata(this)" id="虚拟主机"> 虚拟主机 </li>
<li onclick="getdata(this)" id="多开"> 微信多开 </li>
<li onclick="getdata(this)" id="文库"> 百度文库 </li>
<li onclick="getdata(this)" id="office">OFFICE</li>
<li onclick="getdata(this)" id="小程序"> 小程序 </li>
</ul>
</div>
<!-- 右侧容器 -->
<div class="right">
<ul></ul>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
// 对以后点击对象 (通道号按钮) 更换 css 款式
$(document).ready(function(){$('#content .left ul li').click(function(){$(this).siblings().removeClass('select_background');
$(this).addClass('select_background');
})
});
// AJAX 加载数据
function getdata(event){
$.ajax({
type:"get",
url:'getdata.php?kw='+event.id,
dataType:"json",
success:function(data){if (data.code == 201) {$('#content .right ul').css("opacity","1"); // 把透明度复原
$('#content .right ul').html(data.msg);
}else{window.history.pushState('','', '?kw='+event.id); // 不刷新更新浏览器 url
$('#content .right ul').empty(); // 避免 append 反复加载
$('#content .right ul').css("opacity","1"); // 把透明度复原
for (var a in data){$('#content .right ul').append("<li><div class=\"logo\"><img src=\""+data[a].imgurl+"\"></div><div class=\"info\"><div class=\"title\">"+data[a].resname+"</div><div class=\"data\"> 查看 120 评论 0 2020-10-20</div></div></li>");
}
}
},
error:function(data){alert("777")
},
beforeSend:function(data){
// 在数据还没加载实现的时候,批改整个 div 的透明度,达到一个过渡成果
$('#content .right ul').css("opacity","0.3");
}
})
}
</script>
</html>
getdata.php
<?php
header("Content-type:application/json");
$kw = trim($_GET["kw"]);
// 判断是否为空
if ($kw == "") {
$results = array(
"code" => 201,
"msg" => "参数谬误"
);
}else{
$host = "数据库服务器地址";
$user = "数据库账号";
$pwd = "数据库明码";
$db = "数据库名";
// 连贯数据库
$con = mysql_connect($host,$user,$pwd);
if (!$con){die('Could not connect:' . mysql_error());
}
mysql_select_db($db, $con);
mysql_query("SET NAMES UTF8");
// 验证 kw
$kw_result = mysql_query("SELECT id,resname,resint,imgurl FROM reslist WHERE resname LIKE'%$kw%'ORDER BY ID DESC");
$results = array();
$kw_exits = mysql_num_rows($kw_result);
if ($kw_exits) {
// 资源存在,遍历数据
while ($data_row = mysql_fetch_assoc($kw_result)) {$results[] = $data_row;
}
}else{
// 资源不存在
$results = array(
"code" => 201,
"msg" => "不存在此资源"
);
}
}
// 断开连接
mysql_close();
// 输入
echo json_encode($results);
?>
index.css
*{
margin:0;
padding:0;
list-style: none;
}
html {overflow-y: scroll;}
body{background: #FAFAFA;}
#content{
width: 1000px;
height: 800px;
margin: 30px auto 0;
/*background: #ccc;*/
}
#content .left{
width: 250px;
height: 800px;
background: #fff;
float: left;
border:1px solid #eee;
}
#content .left ul li{
width: 100%;
height: 45px;
line-height: 45px;
font-size: 14px;
text-indent: 15px;
}
#content .left ul li:hover{
background: #eee;
cursor: pointer;
}
/* 左侧导航抉择后的款式 */
.select_background{
background: #eee;
color: #333;
}
#content .right{
width: 740px;
height: 800px;
/*background: #fff;*/
float: right;
}
#content .right ul li{
width: 100%;
height: 80px;
background: #fff;
margin-bottom: 15px;
border:1px solid #eee;
}
#content .right ul li .logo{
width: 80px;
height: 80px;
float: left;
}
#content .right ul li .logo img{
width: 60px;
height: 60px;
margin:10px 10px;
border-radius: 100px;
overflow: hidden;
}
#content .right ul li .info{width: calc(100% - 80px);
height: 80px;
float: right;
}
#content .right ul li .info .title{
width: 100%;
height: 40px;
line-height: 60px;
font-size: 16px;
color: #333;
}
#content .right ul li .info .data{
width: 100%;
height: 40px;
line-height: 30px;
font-size: 13px;
color: #999;
}
演示
Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-10-21
WeChat:face6009