如何在JavaScript中获取URL参数并用于POST请求？

给你两种简单可行的方案，根据你的场景选就行：

方案1：用PHP直接传id（最适合当前PHP页面场景） #

你的页面是home.php，服务器已经能通过$_GET['id']拿到参数了，直接把这个值输出到JS里用就行：

<?php 
// 先获取id（也可以直接在JS里输出，不用单独定义变量）
$id = $_GET['id']; 
?>

<script>
function showStackedVerticalChart() {
  // 把PHP拿到的id赋值给JS变量
  var currentId = "<?php echo $id; ?>";
  // 用模板字符串拼接URL，或者用字符串拼接也行
  $.post(`partials/get-chart-data.php?chart_type=vertical-bar&id=${currentId}`,
    function(data) {
      // 下面的图表代码不用改
      var chartdata = {
        labels: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5", "Line 6", "Line 7", "Line 8", "Line 9", "Line 10",
          "Line 11", "Line 12", "Line 13", "Line 14", "Line 15", "Line 16", "Line 17", "Line 18", "Line 19", "Line 20",
          "Line 21", "Line 22", "Line 23", "Line 24", "Line 25", "Line 26", "Line 27", "Line 28", "Line 29", "Line 30", "Line 31", "Line 32"
        ],
        datasets: data
      };

      var graphTarget = $("#stacked-vertical-chart");

      var graph = new Chart(graphTarget, {
        type: 'bar',
        data: chartdata,
        options: {
          scales: {
            xAxes: [{
              barPercentage: 0.5,
              stacked: true
            }],
            yAxes: [{
              stacked: true
            }]
          }
        }
      });
    });
}
</script>

你之前的写法问题在哪？ #

1. 变量名写错了：你定义的是$id，但拼接的时候用了$mo
2. 没正确嵌入PHP代码：PHP代码必须放在<?php ?>标签里，服务器才会解析，直接写在JS字符串里只会被当成普通文本。

方案2：纯JS解析URL参数（不依赖PHP） #

如果不想碰PHP，直接用JS从当前URL里提取id参数就行，写个小工具函数：

// 工具函数：从URL里拿指定参数
function getUrlParam(name) {
  const params = new URLSearchParams(window.location.search);
  return params.get(name);
}

function showStackedVerticalChart() {
  var currentId = getUrlParam('id'); // 拿到url里的id=07
  $.post(`partials/get-chart-data.php?chart_type=vertical-bar&id=${currentId}`,
    function(data) {
      // 图表代码保持不变
      var chartdata = {
        labels: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5", "Line 6", "Line 7", "Line 8", "Line 9", "Line 10",
          "Line 11", "Line 12", "Line 13", "Line 14", "Line 15", "Line 16", "Line 17", "Line 18", "Line 19", "Line 20",
          "Line 21", "Line 22", "Line 23", "Line 24", "Line 25", "Line 26", "Line 27", "Line 28", "Line 29", "Line 30", "Line 31", "Line 32"
        ],
        datasets: data
      };

      var graphTarget = $("#stacked-vertical-chart");

      var graph = new Chart(graphTarget, {
        type: 'bar',
        data: chartdata,
        options: {
          scales: {
            xAxes: [{
              barPercentage: 0.5,
              stacked: true
            }],
            yAxes: [{
              stacked: true
            }]
          }
        }
      });
    });
}

这种方法哪怕是静态HTML页面也能用，灵活性更高。

内容的提问来源于stack exchange，提问作者Pasindu Hettiarachchi