如何在不刷新整个页面的情况下更改 URL答案

【问题标题】：How to Change URL without refreshing the whole page如何在不刷新整个页面的情况下更改 URL
【发布时间】：2019-05-16 19:42:13
【问题描述】：

我一直在 stackOverFlow 等上搜索，看看是否可以在不刷新整个页面的情况下更改 URL 我找到了一些答案，但它们并没有真正帮助。
无论如何，所以我想在 URL 为 someURL.com/?c=users&a=login 时更改 <div> 内容。你知道它会加载我写的函数。
例如看下面的代码：

<?php
    require_once 'model/Muser.php';
    $class = new user();
    switch ($action){
        case 'login':
            if($_POST){
                $data=$_POST['frm'];
                $password=sha1($data['password']);
                $user=$class->select_user($data['username']);
                if($user['password']==$password){

                }
            }
        break;
        case 'logout':

        break;

    }

    require_once "view/$controller/$action.php";

所以当我输入someURL.com/?c=users&a=login 它会加载 view/users/login.php页面但我只想更改<div> 的内容。我已经使用 jquery 解决了这个问题，但我想当用户键入 someURL.com/?c=users&a=login <div> 内容更改时或者当点击某个按钮时，url 和<div> 的内容会发生变化。
有什么解决办法吗？

【问题讨论】：

通常您希望在客户端执行此操作，换句话说，使用带有 history API 的 Javascript developer.mozilla.org/en-US/docs/Web/API/History 请参阅方法 pushState 和 replaceState 并且表单提交意味着使用 AJAX 和 JSON。
了解服务器和客户端如何相关（它们如何相互通信）以及如何通过 HTTP 维护状态可能也很有用。这些是您在进入服务器和客户端之间的异步通信之前真正需要掌握的核心概念。不用担心它们很容易理解，但是没有这种理解就没有什么意义了。只需在 Google 上搜索“客户端服务器通信”和“HTTP 和维护状态”等内容
如果您不更改 url 而是仅在单击按钮时更改内容怎么办，方法是使用 javascript 侦听该按钮上的单击事件并使用 php 包含一组代码。有些人可能会认为这是一种不好的做法（即将 php 和 js 混合在一起）。这只是我的一个意见。或者您可以只使用 css 隐藏一些内容，然后在单击按钮时切换显示属性。
@IsraelObanijesu - 国际海事组织，只有湿的时候才不好（把所有东西都写两次）。我放东西是有意义的。如果它只是处理这一页的一小段 JS，那么创建一个必须跟踪的额外文件是没有意义的。

标签： javascript php jquery

【解决方案1】：

您可以在浏览器中使用window.location.search 属性来获取查询参数的字符串。然后您可以使用URLSearchParams 对象来仅获取您需要的参数。根据该值，您可以使用 jQuery 更改页面上的某些内容。

$(document).ready(function(){
  function updateDOMBasedOnQueryParams() {
    var urlParams = new URLSearchParams(window.location.search)

    if(urlParams.get('c') === '1') {
      $('.heading').text("'c' Query param has value 1")
    }
  }

  updateDOMBasedOnQueryParams()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1 class="heading">Test heading</h1>

见：https://davidwalsh.name/query-string-javascript

【讨论】：

您的代码没有显示您更改 URL 但阻止页面重新加载的示例。
可以使用history api推送新的状态。（例如：window.history.pushState({test:1}, null, '?test=1')）

【解决方案2】：

你能不能在我们的页面中定义一个DIV，例如index.html，并使用Ajax将结果放入DIV。

没有jQuery的解决方案：

const Http = new XMLHttpRequest();
const url='YOU_URL?param1=data1&param2=data2';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
    if (this.readyState == 4 && this.status == 200) {
        var htmlRequest = this.responseText;
        document.getElementById("DIV").innerHTML = htmlRequest;
    }
}

【讨论】：