如何在不刷新页面的情况下更改网址并获取价值?

时间:2018-04-06 11:19:16

标签: php codeigniter

controller:Welcome.php

public function tutorial_overview()
{
    $link = $_GET['link'];
    echo $link;
}

view:index.php

<?php
    foreach($heading as $sub)
    {
    echo "<li>
            <a href='javascript:void(0)' class='links' id='".str_replace(" ",'-',$sub)."'>
                <i class='fa fa-angle-double-right'></i>&nbsp;".$sub."
            </a>
        </li>";
    }
?>

<script>
    $(document).ready(function(){
        $(".links").click(function(){
            link = this.id;
            history.pushState(null, null, '<?php echo base_url(); ?>'+link);
            $.ajax({
                type:"GET",
                url:"<?php echo base_url(); ?>tutorial_overview/"+link,
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

在这段代码中我创建了一个我已定义的视图文件

<a href='javascript:void(0)' class='links' id='".str_replace(" ",'-',$sub)."'>
            <i class='fa fa-angle-double-right'></i>&nbsp;".$sub."
        </a>

这是动态的。现在我想更改网址链接以及更改内容,这意味着当我点击链接时,网址会发生变化,内容也会在没有刷新页面的情况下发生变化。那么,我该怎么办呢?请帮帮我。

谢谢

1 个答案:

答案 0 :(得分:0)

我认为你的jQuery代码存在问题 -

link = this.id;

尝试在下面应用代码 -

$(".links").click(function(){
    var link = $(this).attr('id');
    var newUrl = '<?php echo base_url(); ?>' + link;

    history.pushState({}, null, newUrl);

    $.ajax({
        type:"GET",
        url:"<?php echo base_url(); ?>tutorial_overview/"+link,
        data: { link: link },
        success:function(data){
            alert(data);
        }
    });
});

您需要做的是 - 调用ajax,获取数据然后执行其他操作。您可以在需要时通过历史记录pushState更改URL。请注意,较旧的浏览器不兼容。