使用 AJAX 调用 asp 页面，然后使用从页面返回的 JSON 数据填充带有选项的 select 框

Question

我正在尝试根据从我的 ASP 页面返回的 JSON 数据填充 select 框：http://accdbmgr-001-site1.etempurl.com/ajax.asp

这是从服务器返回的数据：

{
  "data": [{
    "Lastname": "Roussel",
    "Firstname": "Donald"
  }, {
    "Lastname": "Sabourin",
    "Firstname": "Manon"
  }, {
    "Lastname": "Kelly",
    "Firstname": "Bruce"
  }]
}

但是，出于某种原因，它似乎无法将我的 JSON 数据添加到 select 框中。我希望选项显示为：Lastname, FirstName

<div id="test"></div>
<form>
  <select id="select1"></select>
</form>

$(document).ready(function() {
  $.get('http://accdbmgr-001-site1.etempurl.com/ajax.asp', {
    category: 'client',
    type: 'premium'
  }, function(data) {
    alert("success")
    //$("#test").html(data)
    var obj = JSON.parse(data);
    for (i in obj) {
      $('#select1').append(new Option(obj[i].Firstname, obj[i].Lastname));
    }
  });
});

Answer 1

主要问题是因为您正在遍历 obj，而您需要遍历 obj.data 数组。

另请注意，您可以使用 map() 构建一个字符串数组，然后您可以 append() 一次使逻辑更简洁、性能更高。

最后，您的代码正在创建一个 option 元素，其中 Firstname 作为元素文本，Lastname 作为 value。如果您希望文本采用 Lastname, Firstname 格式，您需要将文本明确设置为该格式。试试这个：

var obj = {
  "data": [{
    "Lastname": "Roussel",
    "Firstname": "Donald"
  }, {
    "Lastname": "Sabourin",
    "Firstname": "Manon"
  }, {
    "Lastname": "Kelly",
    "Firstname": "Bruce"
  }]
}

var options = obj.data.map(function(item) {
  return `<option>${item.Lastname}, ${item.Firstname}</option>`;
});
$('#select1').append(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>
<form>
  <select id="select1"></select>
</form>

另请注意，如果您在请求中设置 dataType: 'json' 或使用 $.getJSON()

，则不需要 JSON.parse()

使用 AJAX 调用 asp 页面，然后使用从页面返回的 JSON 数据填充带有选项的 select 框

Using an AJAX call to asp page then using JSON data returned from page to populate a select box with options

javascript

jquery

json

html-select