Question

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

<?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>的内容就会更改。
任何解决方案吗？

Answer 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

Answer 2

您可以在我们的某些页面（例如index.html）中定义DIV，然后使用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;
    }
}

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

2 个答案: