jQuery Ajax获取含单个变量及多维数组的JSON数据的处理问询

嘿，针对你用Ajax+JSON从数据库取数据，需要根据返回记录数做不同处理的需求，我给你整理了Stack Overflow上Anurag和Phil分享的优质解法，绝对实用～

不管后端返回无结果、单条还是多条记录，最省心的方式是让后端统一返回包含记录数和数据的JSON结构，这样前端不用猜数据类型，直接拿数值判断就行。如果后端没法改结构，也可以在前端自己处理类型转换。

方案一：依赖后端返回的记录数字段（最推荐） #

让后端返回这样的JSON格式：

• 无结果时：

{
  "count": 0,
  "data": []
}

• 单条记录时：

{
  "count": 1,
  "data": [{"id": 1, "name": "张三"}]
}

• 多条记录时：

{
  "count": 3,
  "data": [{"id":1,"name":"张三"}, {"id":2,"name":"李四"}, {"id":3,"name":"王五"}]
}

前端用Ajax处理的代码示例（以jQuery为例）：

$.ajax({
  url: '你的数据接口地址',
  dataType: 'json',
  success: function(res) {
    // 根据count值分情况处理
    if (res.count === 0) {
      // 无结果：提示用户
      alert('没有找到匹配的记录哦');
    } else if (res.count === 1) {
      // 单条记录：直接填充表单
      const record = res.data[0];
      $('#name').val(record.name);
      $('#user-id').val(record.id);
      // 其他表单字段同理
    } else {
      // 多条记录：引导到列表页或直接渲染列表
      alert(`找到${res.count}条记录，即将跳转到列表页`);
      // 跳转到列表页：window.location.href = '/record-list';
      // 或者在当前页渲染有序列表
      let listHtml = '<ol>';
      res.data.forEach(item => {
        listHtml += `<li>${item.name}（ID：${item.id}）</li>`;
      });
      listHtml += '</ol>';
      $('#result-container').html(listHtml);
    }
  },
  error: function() {
    alert('请求出错啦，请稍后重试');
  }
});

方案二：前端自行判断数据类型（适配后端未统一返回结构的情况） #

如果后端没法调整返回格式，可能返回的是数组（多条/无结果）或单个对象（单条），这时候前端需要先把数据统一转成数组，再判断长度：

$.ajax({
  url: '你的数据接口地址',
  dataType: 'json',
  success: function(res) {
    let dataList = [];
    // 把返回数据统一转成数组
    if (Array.isArray(res)) {
      dataList = res;
    } else if (res !== null && typeof res === 'object') {
      // 单条记录转成数组
      dataList = [res];
    }

    // 现在根据数组长度处理
    if (dataList.length === 0) {
      alert('没有找到匹配的记录');
    } else if (dataList.length === 1) {
      // 填充表单
      const record = dataList[0];
      $('#name').val(record.name);
      $('#user-id').val(record.id);
    } else {
      // 处理多条记录
      let listHtml = '<ol>';
      dataList.forEach(item => {
        listHtml += `<li>${item.name}</li>`;
      });
      listHtml += '</ol>';
      $('#result-container').html(listHtml);
    }
  }
});

小贴士：优先推荐方案一哦，统一的后端返回结构能让前端逻辑更简洁，也能避免因为后端返回格式不一致导致的bug～

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