首先看下效果
思路
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" style="position: fixed;"> <!-- 无序列表 --> <ul> <li onclick="getdata(this)" id="测试">首页</li> <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> <li onclick="getdata(this)" id="影视">影视APP</li> <li onclick="getdata(this)" id="音乐">音乐APP</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> </ul> </div> <!-- 右侧容器 --> <div class="right"> <ul></ul> </div> </div> </body> <?php $kw = $_GET["kw"]; if (empty($kw)) { $kw_str = "测试"; }else{ $kw_str = $kw; } ?> <script src="http://www.5imoban.net/uploads/allimg/210709/14493613I-1.jpg"></script> <script type="text/javascript"> // 加载页面内容 window.onload=function(){ $.ajax({ type:"get", url:'getdata.php?kw=<?php echo $kw_str; ?>', 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=<?php echo $kw_str; ?>'); // 不刷新更新浏览器url $('#<?php echo $kw_str; ?>').addClass('select_background'); // 给当前选中的项目添加样式 $('#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\">查看 "+data[a].fangwl+" 评论 "+data[a].liuyannum+" "+data[a].resint+"</div></div></li>"); } } }, error:function(data){ alert("服务器错误") } }) } //对当前点击对象(通道号按钮)更换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\">查看 "+data[a].fangwl+" 评论 "+data[a].liuyannum+" "+data[a].resint+"</div></div></li>"); } } }, error:function(data){ alert("服务器错误") }, 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; }更多参考:jQuery ajax - load() 方法