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

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

在线体验

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

思路

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

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

index.html




    AJAX+HISTORY无刷新网页
    
    


    
    
  • 首页
  • 安卓软件
  • 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;
    }

    演示

    image

    Author:TANKING
    Web:http://www.likeyun.cn/
    Date:2020-10-21
    WeChat:face6009

    你可能感兴趣的