如何解析ASP.NET WebService的JSON数据，正确填充DropDownList

我之前也踩过这个坑！你现在的问题本质是遍历返回的JSON数据时，没有正确提取AccountNumber字段，反而把整个对象直接塞到了DropDownList的选项里，所以才会显示整个JSON对象内容。下面给你两种常用的解决办法：

如果用原生XMLHttpRequest发起请求，核心是解析JSON后，遍历数组时要明确取出每个对象的AccountNumber属性：

var xhr = new XMLHttpRequest();
xhr.open('GET', '你的WebService接口地址', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 把返回的JSON字符串解析为JS对象数组
    const accountList = JSON.parse(xhr.responseText);
    const dropdown = document.getElementById('你的DropDownListID');
    
    // 先清空下拉框原有选项（可选）
    dropdown.innerHTML = '';
    
    // 遍历数组，逐个添加选项
    accountList.forEach(account => {
      const option = document.createElement('option');
      // 关键：取AccountNumber作为选项文本
      option.textContent = account.AccountNumber;
      // 同时设置选项的value值（按需调整）
      option.value = account.AccountNumber;
      dropdown.appendChild(option);
    });
  }
};

xhr.send();

如果项目里用了jQuery，代码会更简洁，而且jQuery会自动帮你解析JSON（只要服务器返回正确的Content-Type）：

$.ajax({
  url: '你的WebService接口地址',
  type: 'GET',
  dataType: 'json', // 指定返回类型为JSON，自动解析
  success: function(accountList) {
    const $dropdown = $('#你的DropDownListID');
    $dropdown.empty(); // 清空原有选项
    
    // 遍历JSON数组，生成选项
    $.each(accountList, function(index, account) {
      $dropdown.append($('<option>', {
        text: account.AccountNumber, // 选项显示文本
        value: account.AccountNumber // 选项对应的值
      }));
    });
  },
  error: function(xhr, status, err) {
    console.error('加载账户数据失败:', err);
  }
});

• 确保WebService返回的是正确的JSON格式，并且响应头的Content-Type设置为application/json，否则解析会出问题；
• 检查DropDownList的ID是否和代码里的一致，别犯拼写错误；
• 绝对不要直接把整个account对象赋值给选项的文本（比如option.textContent = account），这样会显示[object Object]或者原始JSON字符串，这正是你现在遇到的问题。

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