如何使用PHP或原生JavaScript实现URL中state参数的点击切换功能

我来给你分享两种简单可行的实现方式，分别用PHP后端和原生JavaScript前端来做，你可以根据自己的需求选择：

PHP 后端实现（页面刷新式切换） #

因为PHP是服务端语言，每次点击链接都会触发页面请求，我们可以先读取当前URL里的state参数，计算出下一个要切换的值，再动态生成对应的链接。

代码示例 #

<?php
// 获取当前URL中的state参数，默认值设为0
$currentState = isset($_GET['state']) ? (int)$_GET['state'] : 0;
// 切换state值：0变1，1变0
$nextState = $currentState === 0 ? 1 : 0;
?>

<!-- 动态生成带有新state参数的切换链接 -->
<a href="index.php?state=<?php echo $nextState; ?>">state</a>

工作原理 #

每次用户点击链接，服务端会先解析当前URL里的state值，反转后生成新的链接地址。页面刷新后，URL就会变成带有新state参数的地址，循环往复实现切换。

原生JavaScript 前端实现（支持无刷新切换） #

如果不想每次点击都刷新页面，用原生JS就能直接在前端处理URL参数的切换，还能实现无刷新修改地址栏URL的效果。

方案1：基础版（点击后页面刷新） #

这种方式和PHP逻辑类似，但在前端计算下一个state值并更新链接的href属性：

<a href="index.php?state=0" id="toggleStateLink">state</a>

<script>
const toggleLink = document.getElementById('toggleStateLink');

toggleLink.addEventListener('click', function(e) {
    // 解析当前URL的查询参数
    const urlParams = new URLSearchParams(window.location.search);
    // 获取当前state值，默认0
    const currentState = urlParams.get('state') || '0';
    // 切换state值
    const nextState = currentState === '0' ? '1' : '0';
    // 更新链接的跳转地址
    this.href = `index.php?state=${nextState}`;
});
</script>

方案2：进阶版（无刷新修改URL） #

如果希望点击后不刷新页面，只改变地址栏的URL，同时保持页面内容状态，可以用浏览器的history.pushState API：

<a href="javascript:void(0)" id="toggleStateLink">state</a>

<script>
const toggleLink = document.getElementById('toggleStateLink');

// 定义切换state的函数
function toggleState() {
    const urlParams = new URLSearchParams(window.location.search);
    const currentState = urlParams.get('state') || '0';
    const nextState = currentState === '0' ? '1' : '0';
    
    // 更新URL参数
    urlParams.set('state', nextState);
    const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
    
    // 修改地址栏URL但不刷新页面
    history.pushState({}, '', newUrl);
    
    // 这里可以根据state值添加页面逻辑处理，比如切换显示内容
    // 示例：if (nextState === '1') { document.body.style.background = '#eee'; }
}

// 给链接绑定点击事件
toggleLink.addEventListener('click', toggleState);

// 页面加载时可以初始化状态（可选）
window.addEventListener('load', function() {
    const currentState = new URLSearchParams(window.location.search).get('state') || '0';
    // 比如修改链接文本显示当前状态：
    // toggleLink.textContent = `state (当前：${currentState})`;
});
</script>

工作原理 #

前端通过URLSearchParams解析当前URL的参数，计算出下一个state值后，要么更新链接的跳转地址（刷新页面），要么用history.pushState直接修改地址栏URL而不刷新页面，完美实现循环切换的需求。

内容的提问来源于stack exchange，提问作者Emam Kownine