为什么在JavaScript函数执行后追加查询字符串参数？

问题描述：

<?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>

我想存储的颜色点击在会话参数股利现在分配我想将其追加到查询字符串值，以便我可以使用$_GET变量将其存储在会话变量为什么在JavaScript函数执行后追加查询字符串参数？

<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>背景色就会被执行一秒，任何回到默认的白色背景并且查询字符串仅在该函数执行后才被附加。

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

答

当你改变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＃查询参数？ – HVenom

我认为你是mixin的概念，如果你想将var的颜色保存在php中，那么就不需要重新加载整个页面来完成这个任务。最好的方法是对外部页面进行ajax调用，以保存它。所以用户体验会更好，而且不会刷新。 –

答

如果通过更改查询参数来更改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()背景色，因为该功能使浏览器重新加载页面，所以你不会看到的结果很长。

为什么在JavaScript函数执行后追加查询字符串参数？

相关推荐