Javascript 使用AJAX更新网页-如何更改URL？

我使用了以下教程：

我正在使用它来更改页面异步-但是，我还希望使其能够生成新的URL

（当用户单击按钮时，会在显示不同页面时向URL添加一个#，如何使URL反映添加的页面，但保持异步更新？）

HTML:

<a href="#" onclick="loadDoc('{{site.url}}/webpage.html')" id="#my-link"> Use “Just Enough” </a></h5>

<script type="text/javascript">
     function loadDoc(contentURL) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("prinDesc").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", contentURL, true);
         xhttp.send();
     }
</script>

JS:

<a href="#" onclick="loadDoc('{{site.url}}/webpage.html')" id="#my-link"> Use “Just Enough” </a></h5>

<script type="text/javascript">
     function loadDoc(contentURL) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("prinDesc").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", contentURL, true);
         xhttp.send();
     }
</script>

函数loadDoc（contentURL）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（“prinDesc”）.innerHTML=xhttp.responseText；
}
};
open（“GET”，contentURL，true）；
xhttp.send（）；
}

是的，您可以使用

history.pushState使用HTML5

：

<a href="#" onclick="loadDoc('{{site.url}}/webpage.html')" id="#my-link"> Use “Just Enough” </a></h5>

<script type="text/javascript">
     function loadDoc(contentURL) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("prinDesc").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", contentURL, true);
         xhttp.send();
     }
</script>

接受三个参数：状态对象、标题（当前被忽略）和（可选）URL

示例：

<a href="#" onclick="loadDoc('{{site.url}}/webpage.html')" id="#my-link"> Use “Just Enough” </a></h5>

<script type="text/javascript">
     function loadDoc(contentURL) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("prinDesc").innerHTML = xhttp.responseText;
            }
         };
         xhttp.open("GET", contentURL, true);
         xhttp.send();
     }
</script>

在成功回调中使用它：

if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("prinDesc").innerHTML = xhttp.responseText;
    window.history.pushState('Object', 'New Page Title', '/new-url');
}

有关更多信息，请访问

注意：不要信任w3schools，也不要将其用作此处的参考

希望这有帮助。
您将希望在中使用

更新的
loadDoc
功能：

function loadDoc(contentURL) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("prinDesc").innerHTML = xhttp.responseText;

      window.history && window.history.pushState({}, '', contentURL);
    }
  };
  xhttp.open("GET", contentURL, true);
  xhttp.send();
}

希望有帮助
 你应该注意，OP不应该使用W3，我使用的是Jekyll，当我发送链接时，它不再正确地呈现网站（它只是显示标记下降）-我想你不知道如何解决这个问题？恐怕这与后端设置有关。但是–我确实注意到，我提出的解决方案假设相对url（
/webpage.html
，而不是
{{site.url}}}/webpage.html
），如果这有帮助的话？