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

<?phpheader("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