如何为Express API的AJAX请求正确传递参数

核心问题1：循环覆盖sessionStorage存储值 #

你在parsedData.data.rows的遍历循环里，每次迭代都会调用sessionStorage.setItem("user", JSON.stringify(userData))，后一次的存储值会直接覆盖前一次的，最终sessionStorage里只会保留遍历到最后一条数据对应的userData。当你点击非最后一条生成的卡片时，要么拿到的是错误的其他数据，要么如果最后一条数据的master_id本身为空，就会出现pid为undefined的情况。

核心问题2：AJAX请求配置不符合后端接收规则 #

你当前的AJAX配置没有指定请求头的Content-Type，jQuery默认会将对象格式的data转为application/x-www-form-urlencoded格式的参数，如果你后端Express接口是按JSON格式解析请求体的，就会取不到参数，返回400错误。 #

修复代码 #

第一步：修改循环渲染逻辑，给点击事件传当前行的参数 #

不用依赖全局共享的sessionStorage，直接把当前卡片对应的数据作为参数传给点击事件：

const parsedData = JSON.parse(localStorage.getItem('myData'));
const container = document.getElementById('s1');
// 先清空容器，避免重复拼接
container.innerHTML = '';

parsedData.data.rows.forEach((result, idx) => {
  const a = result.master_id;
  const b = result.session_name;
  // 可先查看遍历过程中a、b是否有有效值，排除原始数据字段缺失问题
  console.log('当前遍历参数：', a, b);
  const userData = {"pid":a,"session" :b};
  
  const card = document.createElement('div');
  card.classList = 'card';
  // 直接把当前行的userData作为参数传给graphApi
  const content = `
  <div class="row">
      <div class="card-body" onclick='graphApi(${JSON.stringify(userData)})'>
      </div>
  </div>
  `;
  // 推荐用appendChild而非innerHTML+=，避免之前的DOM节点被意外重置
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = content;
  card.appendChild(tempDiv.firstElementChild);
  container.appendChild(card);
});

第二步：修改graphApi函数，接收参数并调整AJAX配置 #

function graphApi(userData){
  // 直接使用传入的参数，无需读取sessionStorage
  console.log('当前请求参数：', userData);
  $.ajax({
    type: "POST",
    // 指定请求体为JSON格式
    contentType: "application/json; charset=utf-8",
    // 把参数转为JSON字符串
    data: JSON.stringify(userData),
    dataType:"json",
    url: "http://localhost:5000/graphFromcsv",                      
    success: function(data) {
      console.log(data,"graph api");
      // 此处写入你后续绘制多折线图的逻辑
    },
    error: function(err){
      alert("graph api failed to load");
      console.log(err);
    },
  });
}

额外检查项 #

确认你的Express入口文件已经配置了JSON解析中间件，否则后端无法识别前端发送的JSON格式请求体：

// Express入口文件添加该行
app.use(express.json())

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