如何在Ajax中从JSON数组获取FirstName等指定数据字段

没问题，我来一步步教你怎么在Ajax场景下提取指定字段的数据，不管你用原生JS还是jQuery都有对应的实现方式~

如果项目里没用到框架，用原生XMLHttpRequest就能搞定，步骤很清晰：

// 初始化请求对象
const xhr = new XMLHttpRequest();
// 配置请求参数：请求方法、接口地址、是否异步
xhr.open('GET', '你的接口地址', true);
// 直接指定响应类型为JSON，不用手动解析
xhr.responseType = 'json';

// 请求成功的回调
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 拿到接口返回的JSON数组
    const rawDataArray = xhr.response;
    // 遍历数组，提取你需要的字段
    const filteredData = rawDataArray.map(item => {
      return {
        FirstName: item.FirstName,
        CompanyName: item.CompanyName, // 注意你写的"ComapnyName"是拼写错误，建议确认接口返回的字段名
        Designation: item.Designation,
        PersonalEmail: item.PersonalEmail,
        PersonalWebsite: item.PersonalWebsite
      };
    });
    // 这里可以用处理好的数据做任何操作，比如打印或者渲染页面
    console.log('提取后的目标数据：', filteredData);
  } else {
    console.error('请求失败，状态码：', xhr.status);
  }
};

// 请求出错的回调
xhr.onerror = function() {
  console.error('请求过程中发生错误，请检查网络或接口地址');
};

// 发送请求
xhr.send();

如果你的项目已经引入了jQuery，代码会更简洁，可读性也更强：

$.ajax({
  url: '你的接口地址',
  type: 'GET',
  dataType: 'json', // 告诉jQuery自动解析JSON
  success: function(rawDataArray) {
    // 提取目标字段，用箭头函数简化写法
    const filteredData = rawDataArray.map(item => ({
      FirstName: item.FirstName,
      CompanyName: item.CompanyName,
      Designation: item.Designation,
      PersonalEmail: item.PersonalEmail,
      PersonalWebsite: item.PersonalWebsite
    }));
    
    console.log('提取后的目标数据：', filteredData);
    
    // 举个渲染页面的例子：把数据插入到表格里
    filteredData.forEach(person => {
      $('#user-info-table').append(`
        <tr>
          <td>${person.FirstName}</td>
          <td>${person.CompanyName}</td>
          <td>${person.Designation}</td>
          <td>${person.PersonalEmail}</td>
          <td><a href="${person.PersonalWebsite}" target="_blank">访问主页</a></td>
        </tr>
      `);
    });
  },
  error: function(xhr, status, errorMsg) {
    console.error('请求出错：', errorMsg);
  }
});

• 拼写检查：你提问里写的ComapnyName少了一个字母'n'，如果接口返回的字段名确实是这个拼写，就保持一致；如果是笔误，记得改成正确的CompanyName，不然会拿到undefined
• 字段兜底：如果某些字段可能不存在，可以加个默认值，比如FirstName: item.FirstName || '未填写'，避免页面出现空白或者报错
• 请求方法适配：如果接口要求POST请求，只需要把请求方法改成POST，并根据接口要求传递请求体数据（原生里用xhr.send(JSON.stringify(请求体))，jQuery里用data参数）

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