Question

我想通过更改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 。

Answer 1

您可以在HTML5中使用历史记录api

演示 - ＆gt; http://html5demos.com/history

Howto - ＆gt;

http://diveintohtml5.info/history.html

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

Answer 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();
    });
});

替换URL，内容和标题，而无需重新加载页面

2 个答案: