使用jQuery拆分span标签ID传参至PHP，功能无法正常运行

我帮你排查了代码里的问题，核心问题出在AJAX请求的参数传递方式，还有一些细节需要调整，下面一步步说明：

1. AJAX的data参数错误 #

你在$.ajax里写了两个独立的data属性：

data:{image:image},
data:{title:title},

这会导致第二个data直接覆盖第一个，最终只有title参数被发送到后端，这就是参数接收异常的根本原因。正确的做法是把两个参数合并到同一个data对象中。

2. 变量命名优化（可选） #

你的span ID格式是post1_query1_query2，用split('_')拆分后得到的数组是["post1", "query1", "query2"]，当前代码里的image和title变量名其实对应需求里的query1和query2，虽然不影响功能，但调整命名可以避免混淆，让代码更易读。

3. 前后端参数名一致性 #

确保后端PHP接收的参数名和前端发送的完全匹配，这样才能正确获取到传递的值。

修正后的完整代码 #

前端jQuery代码 #

$(document).ready(function(){
  $("span").tooltip({
    track:true,
    open: function( event, ui ) {
      ui.tooltip.css("max-width", "600px");
      var id = this.id;
      var split_id = id.split('_');
      // 调整变量名，更贴合需求中的query1、query2
      var query1 = split_id[1];
      var query2 = split_id[2];
      $.ajax({
        url:'fetch_details.php',
        type:'post',
        // 合并所有参数到同一个data对象
        data:{
          query1: query1,
          query2: query2
        },
        success: function(response){
          $("#"+id).tooltip('option','content',response);
        },
        // 新增错误回调，方便调试请求问题
        error: function(xhr, status, error) {
          console.log("请求出错：" + error);
        }
      });
    }
  });
  $("span").mouseout(function(){
    // 更稳妥的tooltip重新初始化方式，避免重复绑定
    $(this).tooltip('destroy').tooltip();
    $('.ui-tooltip').hide();
  });
});

后端fetch_details.php代码 #

// 同步修改参数名，和前端发送的保持一致
$query1 = htmlentities($_POST['query1']);
$query2 = htmlentities($_POST['query2']);

// 这里添加你的业务逻辑，比如根据query1和query2查询数据并返回响应
// 示例：echo "Query1: {$query1}, Query2: {$query2}";

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