使用php后台给自己做一个页面路由，配合ajax实现局部刷新。

Posted 2020-08-29 webSong

今天就要放假了，把近来囤积的小玩意儿总结整理一下。

在请求一个html页面来嵌入到当前页会有一个问题，就是跟随请求过来的html他的样式表和脚本会失效。是因为文档加载的先后顺序等问题造成的。因此，加载一些纯文本还好。

举个例子，只有这个问题明白了，我们的原理才好理解。

b.html有一个点击事件，但是a.html通过ajax拿到b.html后，如果这个b.html的js不是写在页面里面的，你就会发现没有生效。css样式也一样，都需要重新绑定一下。

首先定义两个页面，一个父页面a.html,一个b.html

a页面我给它一个请求按钮
<button>我要一个页面，php快给我。</button>
给他一个容器
<div class="cont"></div>

　　

b页面不要有head和body
<p id="p">我是被拿到一个页面，我的内容是加油！</p>

　

b页面的js一定是一个单独的文件，如果css的话，我就只给了一个js脚本。
$(‘#p‘).css(‘background‘,‘red‘).on(‘click‘,function () {
    alert(‘asdasd‘);
});

先来看我的后台php控制，其实这里也可以不用php，直接拿地址也行，不过感觉不够高级，写在php里，是不会有‘痕迹’的。

$content =file_get_contents(‘pegr/a.html‘);//我将a页面和a.js都放在分页文件夹下了
$script=file_get_contents(‘pegr/a.js‘);


echo $content,$script;

然后是我们的js里的ajax请求

$(‘button‘).on(‘click‘,function () {
       $.ajax({
           url:‘getData.php‘,
           type:‘POST‘,
           async:true, //是异步加载
           success:function(data){
               console.log(data);  //如果你不清楚下面为什么查找‘$’，看看输出的data就明白了
               for (var i = -1, arr = []; (i = data.indexOf("$", i + 1)) > -1;  arr.push(i));
               //alert(arr);
              var scripts =$(‘<script>‘+data.substring(arr)+‘<\/script>‘);
              $(‘.cont‘).html(data.substring(0,arr));
             // alert(data.substring(arr)) 分理出js脚步
              $(‘body‘).append(scripts);
           },
           error:function(xhr){
               console.log(‘错误‘);
               console.log(xhr);
           }
       })
   })

　　祝大家新年快乐。我今天下午也就可以回家了吧，想想还有些激动呢。