码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-01-24 12:40:59      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:button   刷新   查找   class   失效   不清楚   内容   pos   文件夹   

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

在请求一个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);
           }
       })
   })

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

 

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

标签:button   刷新   查找   class   失效   不清楚   内容   pos   文件夹   

原文地址:http://www.cnblogs.com/webSong/p/6346664.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!