Ajax请求成功但渲染表格时出现Undefined值问题求助

问题直击：你把JSON对象转成字符串了！ #

兄弟，我扫了一眼你的代码，立刻就找到问题根源了——你在Ajax的success回调里多做了一步完全没必要的操作：

result=JSON.stringify(result);

为什么这会导致undefined？ #

你已经在Ajax里设置了datatype:"JSON"（顺便说下，标准写法是驼峰的dataType:"JSON"，jQuery虽然容错但最好规范），这时候jQuery会自动把后端返回的JSON字符串解析成JavaScript数组/对象。

但你用JSON.stringify()把已经解析好的对象又转成了字符串！这时候result.length变成了字符串的字符个数，循环里的result[i]取的是单个字符，自然没有id、st_name这些属性，所以所有字段取值全是undefined！

修复步骤（两步搞定）： #

1. 删掉那行多余的转换代码
   直接移除result=JSON.stringify(result);，让result保持为jQuery已经帮你解析好的数组对象。

2. （可选但建议）修正dataType的写法
   把datatype:"JSON"改成标准驼峰式：

dataType:"JSON",

修复后的核心代码片段： #

function getactivitydetails() {
  $.ajax({
    url:"/sms/ajax/getactivitydetailsAJAX.php",
    type:"POST",
    dataType:"JSON", // 修正为标准驼峰写法
    data:{a:"21", b:"flower", action1:"getactivitydetails"},
    beforeSend:function(){
      //alert("about to make ajax call");
    },
    success:function(result){
      // 移除这行错误代码：result=JSON.stringify(result);
      let html=gethtml(result);
      console.log(result); // 建议用console.log代替alert，更方便看数据结构
      alert(html);
      $("#contentdiv").html(html);
    },
    error:function(){alert("Error");}
  });
}

额外优化建议： #

1. 用console.log代替alert排查问题
   alert只能显示字符串，而console.log能在浏览器控制台里清晰展示数组/对象的结构，调试起来方便太多。

2. 给表格函数加空数据判断
   避免空数组时生成空表格，给用户友好提示：

function gethtml(result) {
  // 先判断是否为有效数组
  if (!Array.isArray(result) || result.length === 0) {
    return '<p style="text-align:center; padding:20px;">暂无活动数据</p>';
  }

  let x=`<table>`;
  for(let i=0; i<result.length; i++) { // 直接在for里声明i，更规范
    if(i===0) {
      x+=`
        <thead>
          <th>No.</th>
          <th>ID</th>
          <th>Name-Staff</th>
          <th>id</th>
          <th>Time</th>
          <th>Loc</th>
          <th>Core</th>
          <th>Export</th>
          <th>Edit</th>
        </thead>
        <tbody>
      `;
    }
    x+=`
      <tr>
        <td>${i+1}</td>
        <td>${result[i]['id']}</td>
        <td>${result[i]['st_name']}</td>
        <td>${result[i]['def_time']}</td>
        <td>${result[i]['short']}</td>
        <td>${result[i]['core']}</td>
        <td>${result[i]['export']}</td>
        <td></td>
        <td></td>
      </tr>
    `;
  }
  x+=`</tbody></table>`;
  return x;
}

3. 检查字段对应关系
   顺便提一句，你表头里的Loc列对应代码里的result[i]['short']，Time对应def_time，要确保这些字段名和后端返回的JSON字段完全一致（大小写、拼写都不能错），这也是容易踩坑的点。

按这个方法改完，你的表格应该就能正常显示数据了，这就是个典型的“多做了一步多余操作”的小失误，很容易犯，不用太懊恼😂

内容来源于stack exchange