Ajax+History实现无刷新浏览器改变页面内容，刷新页面数据

Ajax主要用于请求服务器的数据
History主要用于更新浏览器Url

在线体验

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

思路

1、通过Ajax请求服务器的数据，渲染到页面
2、通过History改变浏览器的Url

整个过程就无需刷新页面，但是浏览器地址发生了改变，并且页面内容也发生了改变。

index.html

    
    
    


    
    

        
        

            
            

                
首页
                
安卓软件
                
iOS软件
                
破解软件
                
微信相关
                
百度网盘
                
虚拟主机
                
微信多开
                
百度文库
                
OFFICE
                
小程序
                
影视APP
                
音乐APP
                
源码分享
                
短网址
                
群发软件
                
机器人
            
        
        
        

            

        
    

getdata.php

 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