Ajax+History實現無刷新瀏覽器改變頁面內容，刷新頁面數據

時間 2020-10-22

標籤 javascript php css html java mysql jquery ios ajax sql 欄目 Ajax 简体版

原文原文鏈接

Ajax主要用於請求服務器的數據
History主要用於更新瀏覽器Urljavascript

在線體驗

http://www.likeyunba.com/demo...php

思路

一、經過Ajax請求服務器的數據，渲染到頁面
二、經過History改變瀏覽器的Urlcss

整個過程就無需刷新頁面，可是瀏覽器地址發生了改變，而且頁面內容也發生了改變。html

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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></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;
}