通过Ajax传递JS变量至PHP失败，请求技术支援

我一眼就看到问题所在了——你的前后端逻辑完全搞反了，还有几个关键细节没处理到位，咱们一步步来修复：

1. 核心问题：前后端请求逻辑不匹配 #

你的前端JS代码是点击编辑按钮后，发送action='Edit'请求，目的是获取对应ID的待编辑数据、填充模态框；但后端my_action.php中action='Edit'的分支却写了更新数据的SQL，这完全是南辕北辙！

这直接导致：

• 前端要数据，后端却返回更新提示（还没正确输出JSON格式）
• 后端的$my_name变量根本没定义，执行UPDATE时会静默出错（你没发现是因为PDO默认关闭了错误提示）
• 你误以为是$_POST["my_id"]为空，其实是后端逻辑错误，根本没去查询数据

2. 次要问题：后端缺少JSON响应输出 #

不管是查询还是更新操作，后端都需要把结果用json_encode()输出，否则前端AJAX因为指定了dataType:"json"，会无法解析响应，甚至直接进入错误回调（你没写error回调，所以没察觉）。

3. 修复后的完整代码示例 #

第一步：修正后端my_action.php逻辑 #

拆分两个动作：Edit用于查询数据，Update用于执行更新：

<?php
// 假设你已经初始化了PDO连接$connect
// 开启PDO错误模式，方便调试
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if($_POST["action"] == 'Edit') {
    // 这一步是查询待编辑的数据，返回给前端
    $my_id = $_POST["my_id"];
    $query = "SELECT my_id, my_name FROM tbl_my WHERE my_id = :my_id";
    $statement = $connect->prepare($query);
    $statement->bindParam(':my_id', $my_id, PDO::PARAM_INT);
    $statement->execute();
    $data = $statement->fetch(PDO::FETCH_ASSOC);
    
    // 返回JSON格式的数据给前端
    echo json_encode($data);
} elseif($_POST["action"] == 'Update') {
    // 这一步才是执行更新操作
    $my_id = $_POST["my_id"];
    $my_name = $_POST["my_name"];
    
    $data = array(
        ':my_name' => $my_name,
        ':my_id' => $my_id
    );
    $query = "UPDATE tbl_my SET my_name = :my_name WHERE my_id = :my_id";
    $statement = $connect->prepare($query);
    
    if($statement->execute($data)) {
        $output = array(
            'success' => 'Data Updated Successfully'
        );
        echo json_encode($output);
    } else {
        $output = array(
            'error' => 'Failed to update data'
        );
        echo json_encode($output);
    }
}
?>

第二步：前端补充表单提交逻辑 #

你原来的代码只做了“获取数据填充模态框”，还需要添加提交表单的逻辑，发送action='Update'请求：

// 原有编辑按钮点击逻辑保持不变，仅微调action值
$(document).on('click', '.edit', function(){
  var my_id = $(this).attr('id');
  clear_field();
  $.ajax({
    url:"my_action.php",
    type:"POST",
    data:{action:'Edit', my_id:my_id},
    dataType:"json",
    success:function(data) {
      console.log(data); // 控制台查看返回数据，方便调试
      $('#my_name').val(data.my_name);
      $('#my_id').val(data.my_id);
      $('#modal_title').text('Edit');
      $('#button_action').val('Save Changes');
      $('#action').val('Update'); // 这里改为Update，对应后端更新动作
      $('#formModal').modal('show');
    },
    // 添加error回调，调试更方便
    error:function(xhr, status, error) {
      console.error('Fetch Error:', error);
      alert('Failed to load edit data');
    }
  })
});

// 新增表单提交逻辑
$(document).on('click', '#button_action', function(){
  var formData = {
    action: $('#action').val(),
    my_id: $('#my_id').val(),
    my_name: $('#my_name').val()
  };
  
  $.ajax({
    url:"my_action.php",
    type:"POST",
    data:formData,
    dataType:"json",
    success:function(data) {
      if(data.success) {
        alert(data.success);
        $('#formModal').modal('hide');
        // 这里可以添加刷新列表的逻辑，比如重新加载数据
      } else if(data.error) {
        alert(data.error);
      }
    },
    error:function(xhr, status, error) {
      console.error('Update Error:', error);
      alert('Failed to update data');
    }
  });
});

4. 额外调试建议 #

• 打开浏览器开发者工具→网络标签，查看AJAX请求的参数和响应，确认my_id是否真的传送到后端
• 在后端代码开头添加var_dump($_POST); exit;，直接查看接收的POST参数
• 开启PHP错误提示，方便排查未定义变量之类的低级问题

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