为什么在执行 JavaScript 函数后会附加查询字符串参数？答案

【问题标题】：Why the query string parameter gets appended after the execution of the JavaScript function?为什么在执行 JavaScript 函数后会附加查询字符串参数？
【发布时间】：2017-02-21 12:58:59
【问题描述】：

<?php
session_start();
?>
<!DOCTYPE html>
<html>
    <body>

        <h2 id="title">Choose a background Theme</h2>
        <div id="black"></div>
        <div id="orange"></div>
        <div id="brown"></div>

    </body>
</html>

我现在正在尝试将单击的颜色存储在会话参数中的 div 中，以分配我尝试将其附加到查询字符串的值，以便我可以使用 $_GET 变量将其存储在会话变量中

<script>
    var c_selected;
    window.onload = function () {

        document.getElementById("black").addEventListener("click", function () {
            setBackground("black");

        });
        document.getElementById("orange").addEventListener("click", function () {
            setBackground("orange");
        });
        document.getElementById("brown").addEventListener("click", function () {

            setBackground("brown");
        });

    };

    function setBackground(scolor) {
        location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor;
        document.body.style.backgroundColor = scolor
        document.getElementById(scolor).style.border = "thick solid white";
        if (c_selected) {
            document.getElementById(c_selected).style.border = "none";
        }
        document.getElementById("title").style.color = "white";
        <?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?>
        c_selected = scolor;
    }


</script>

但是现在只要我点击任何<div>，背景颜色就会在瞬间执行，任何返回到默认的白色背景，并且只有在函数执行后才会附加查询字符串。

请解释发生这种情况的原因，而不仅仅是解决方案。

【问题讨论】：

标签： javascript php query-string

【解决方案1】：

当您更改 location.href 时，您正在重新加载页面，但随着脚本继续运行，您可以看到更改颜色属性的时间。

看一下，我只评论了你要更改的行location.href。

如果你想使用颜色作为查询字符串参数，你应该使用散列#参数

  var c_selected;
  window.onload = function() {
  document.getElementById("black").addEventListener("click", function() {
    setBackground("black");

  });
  document.getElementById("orange").addEventListener("click", function() {
    setBackground("orange");
  });
  document.getElementById("brown").addEventListener("click", function() {

    setBackground("brown");
  });

};

function setBackground(scolor) {
  
  /*location.href = (location.href.split("?").length > 1) ? location.href.split("?")[0] + "?color=" + scolor : "?color=" + scolor;*/
  
  document.body.style.backgroundColor = scolor;
  document.getElementById(scolor).style.border = "thick solid white";
  return;
  if (c_selected) {
    document.getElementById(c_selected).style.border = "none";
  }
  
  
  c_selected = scolor;
}

<html>
<body>

    <h2 id="title">Choose a background Theme</h2>
    <div id="black">Black</div>
    <div id="orange">Orange</div>
    <div id="brown">Brown</div>

</body>
</html>

【讨论】：

但是我如何在 php 中检索 #querystring 参数？
我认为您是混合概念，如果您想将 var 颜色保存在 php 中，则无需重新加载整个页面即可完成此操作。最好的方法是对将保存它的外部页面进行 ajax 调用。所以用户体验会好很多，完全不用刷新。

【解决方案2】：

如果您通过更改查询参数来更改location.href，您会使浏览器重新加载页面，因为这表示一个新位置。为防止这种情况，您需要更改哈希 location.href，使用 # 而不是 ? 作为分隔符。

如果你想重新加载页面，你需要在页面加载后实际设置背景颜色，现在你正在附加点击处理程序，它调用setBackground()，然后重新加载页面。

window.onload = function () { 
 /*add click handlers*/ 
 document.body.style.backgroundColor = "<?php $_SESSION['THEME_COLOR'] = isset($_GET['color']) ? $_GET['color'] : "white"; ?>";
}

setBackground()中的背景色不需要改变，因为那个功能会让浏览器重新加载页面，所以你不会很长时间看到结果。

【讨论】：