在不重新加载页面的情况下替换 URL、内容和标题答案

【问题标题】：Replace the URL, contents and title without reloading the page在不重新加载页面的情况下替换 URL、内容和标题
【发布时间】：2015-04-18 22:19:58
【问题描述】：

我想通过更改 div 内容而不加载新页面来创建一个页面站点。所以，我已经这样实现了我的代码：

HTML：

<title>Post title</title>
<body>
    <a class="js-post-bt" href="/post/1" data-id="1"></a>
    <a class="js-post-bt" href="/post/2" data-id="2"></a>
    <a class="js-post-bt" href="/post/3" data-id="4"></a> 

    <div id="post-container"></div>
</body>

脚本

$(function() {
    $(".js-post-bt").on("click", function(e) {
         var post_id = $(this).attr("data-id");
         $.ajax({
            url: "post_title.php?id="+post_id,
            success: function(data) {
                var title = data;
                $.ajax({
                    url: "post.php?id="+post_id,
                    success: function(data2) {
                        // how to change url to post/post_id?
                        document.title = title;
                        $("#post-container").html(data2);
                    }
                });
            }
        });

        e.preventDefault();
    });
});

是否可以只创建一个 ajax 调用并获取返回的数据标题和发布数据。以及点击锚链接后如何将浏览器地址更改为post/post_id。

【问题讨论】：

这就是您需要的答案。 stackoverflow.com/questions/3338642/…

标签： javascript php jquery

【解决方案1】：

您可以在 HTML5 中使用 history api

演示 -> http://html5demos.com/history

如何 ->

http://diveintohtml5.info/history.html

http://html5doctor.com/history-api/

【讨论】：

【解决方案2】：

如果您只想进行一次 ajax 调用，这是个好主意，您还需要更改服务器上的代码。

它应该响应一个 json 对象：

json_encode( array( "title" => $title, "post_data" => $post_data ) );

而你的 ajax 调用变成：

$(function() {
    $(".js-post-bt").on("click", function(e) {
         var post_id = $(this).attr("data-id");
         $.ajax({
            url: "post_title.php?id="+post_id,
            dataType: "json",
            success: function(json_data){
                document.title = json_data["title"];
                $("#post-container").html(json_data["post_data"]);
            }
        });

        e.preventDefault();
    });
});

【讨论】：