点击按钮时通过Ajax向PHP传JS变量并动态设置href问题

场景说明 #

• 表格每行包含一个checkbox，对应一条数据
• 按钮初始为禁用状态，勾选任意checkbox后启用
• 按钮被<a>标签包裹，结构为 <a><button type="button" id="myId" class="classes..."></button></a>
• 存在一个初始为空的数组，勾选checkbox时会将对应行的数据存入该数组

需求 #

点击启用后的按钮时，完成两个操作：

1. 给包裹按钮的<a>标签设置指向PHP文件的href属性
2. 通过Ajax将数组传递给PHP脚本

尝试的代码及问题 #

尝试的JS代码 #

$('#my_initially_disabled_button').on('click',function(){
   if(some_generic_flag == true){
      let link = this.parentNode;
      link.setAttribute('href','scripts/php_script.php');
      
      $.ajax({  
        type: 'POST',  
        url: 'php_script.php', 
        data: { data: my_array }, // my_array为勾选checkbox时更新的数组
        success: function() {
            //some stuff;
        }
    });
   }
});

尝试的PHP接收代码 #

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $var = $_POST['data'];
     
     // 执行var_dump($var)无效果
}

遇到的问题 #

• 上述代码执行后未达到预期效果
• 将Ajax部分移出点击事件后仍无效，页面显示空白
• 移除Ajax部分后，能正确跳转到PHP文件并输出内容

问题原因及解决方法 #

核心问题 #

点击按钮后，<a>标签的href被设置，浏览器会立即触发页面跳转，导致Ajax请求还没完成就被中断，所以PHP端根本接收不到数据。

方案一：Ajax成功后再手动跳转 #

修改JS逻辑，先完成Ajax请求，在成功回调里再触发页面跳转，同时可以去掉<a>标签的默认跳转干扰：

$('#my_initially_disabled_button').on('click',function(e){
   // 阻止按钮和父级a标签的默认行为
   e.preventDefault();
   e.stopPropagation();
   
   if(some_generic_flag == true){
      $.ajax({  
        type: 'POST',  
        url: 'scripts/php_script.php', 
        data: { data: my_array },
        success: function(response) {
            // 先处理成功逻辑，比如提示用户
            // some stuff;
            
            // 再跳转到目标PHP页面
            window.location.href = 'scripts/php_script.php';
        },
        error: function(xhr, status, error) {
            // 请求失败时的处理，比如打印错误
            console.error('请求失败:', error);
        }
    });
   }
});

如果必须保留<a>标签，给它设置href="javascript:void(0)"，避免默认跳转行为。

方案二：用隐藏表单提交替代Ajax（适合需跳转的场景） #

如果业务逻辑必须依赖页面跳转且传递数据，用隐藏表单提交更可靠：

$('#my_initially_disabled_button').on('click',function(e){
   e.preventDefault();
   if(some_generic_flag == true){
      // 创建一个隐藏表单
      let form = $('<form>', {
          method: 'POST',
          action: 'scripts/php_script.php'
      });
      
      // 把数组内容转成隐藏输入项
      $.each(my_array, function(index, value) {
          // 如果数组元素是对象，转成JSON字符串再传递
          let val = typeof value === 'object' ? JSON.stringify(value) : value;
          form.append($('<input>', {
              type: 'hidden',
              name: 'data[]',
              value: val
          }));
      });
      
      // 把表单加到页面并提交
      form.appendTo('body').submit();
   }
});

对应的PHP接收代码（如果传递的是JSON对象）：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $var = $_POST['data'];
     // 解析JSON字符串为数组/对象
     $var = array_map(function($item) {
         return json_decode($item, true) ?? $item;
     }, $var);
     var_dump($var);
}

额外检查点 #

• 点击按钮前，用console.log(my_array)确认数组确实有数据
• 如果PHP端var_dump看不到输出，可在Ajax的success回调里打印response查看，或者在PHP中把数据写入日志文件排查

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