使用 jQuery 通过 JSON 数据填充 HTML 文档中的 <select> 元素

Question

我正在尝试使用 jQuery/ajax 让我的 <select> 元素由我的 JSON 文件中列出的国家/地区名称填充。

<div id="navbar">
  <label for="countrySelect">Select a country from the list:</label>
  <select id="countrySelect" name="countrySelect">
      <!--<option>...</option>-->
   </select>
</div>

--

$(document).ready(function() {
    console.log("Select Function Loaded.");
    $.ajax({
      url: 'libs/php/getCountryISO.php',
      type: 'POST',
      dataType: 'json',
      success: function(data) {
          console.log(JSON.stringify(data));
          console.log("JSON stringified");
        //$.each(data, function(key, countryName) {
            //var option = new Option(countryName, countryName);
            //$(option).html(countryName);
            //$("#countrySelect").append(option);
        //})
      }});
  });

--

<?php

    ini_set('display_errors', 'On');
    error_reporting(E_ALL);

    $executionStartTime = microtime(true);

    $url='project1\libs\json\countryBorders.geo.json';

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_URL,$url);

    $result=curl_exec($ch);

    curl_close($ch);

    $decode = json_decode($result,true);    

    $output['status']['code'] = "200";
    $output['status']['name'] = "ok";
    $output['status']['description'] = "success";
    $output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
    $output['data'] = $decode[''];
    
    header('Content-Type: application/json; charset=UTF-8');

    echo json_encode($output); 

?>

--

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Bahamas","iso_a2":"BS","iso_a3":"BHS","iso_n3":"044"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-77.53466,23.75975],[-77.78,23.71],[-78.03405,24.28615],[-78.40848,24.57564],[-78.19087,25.2103],[-77.89,25.17],[-77.54,24.34],[-77.53466,23.75975]]],[[[-77.82,26.58],[-78.91,26.42],[-78.98,26.79],[-78.51,26.87],[-77.85,26.84],[-77.82,26.58]]],[[[-77,26.59],[-77.17255,25.87918],[-77.35641,26.00735],[-77.34,26.53],[-77.78802,26.92516],[-77.79,27.04],[-77,26.59]]]]}},{"type":"Feature","properties":{"name":"Canada","iso_a2":"CA","iso_a3":"CAN",

我想访问数据 "name": "Bahamas" 键和值对（本质上每个名称都是一个国家名称，所以对就像 "name':'United Kingdom"）并在 <select> 元素中将它们中的每一个都设为 <option>我的 HTML。 我不知道在$decode 部分放什么，因为'type' 或'features' 都不起作用。代码 console.log(JSON.stringify(data)); 没有记录，我注释掉了我的代码的 $.each 部分，只是为了尝试让它的前半部分工作。

Answer 1

有几件事我不清楚

• countryBorders.geo.json 似乎是您网络服务器上的本地文件，我认为没有任何理由使用 curl 来读取它（reading local files in PHP 更容易）
• 我没有看到您的 PHP 脚本正在添加的值。它基本上只是通过解析 JSON 文件，将其包装在一层假 HTTP 中，然后将其重新编码为 JSON 并将其发送给客户端来浪费时间。除了不必要之外，这还会破坏浏览器原本会为您执行的静态文件缓存。
• 该文件似乎位于客户端可访问的目录中，因此没有理由涉及 PHP。客户也可以直接请求该文件，而您根本不需要 getCountryISO.php。
• 国家/地区边界文件对于简单的国家/地区列表可能有点过分，但也许您打算将边界多边形用于某些事情，这取决于。

假设您直接请求countryBorders.geo.json，您的代码可能如下所示：

$(function () {
  $.get('libs/json/countryBorders.geo.json').done(function (data) {
    data.features.forEach(function (feature) {
      $("<option>", {
        value: feature.properties.iso_a2,
        text: feature.properties.name
      }).appendTo("#countrySelect");
    });
  });
});

// Ajax mockup for the sake of the example
$.mockjax({
  url: "libs/json/countryBorders.geo.json",
  responseText: {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "name": "Bahamas",
        "iso_a2": "BS",
        "iso_a3": "BHS",
        "iso_n3": "044"
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": []
      }
    }, {
      "type": "Feature",
      "properties": {
        "name": "Canada",
        "iso_a2": "CA",
        "iso_a3": "CAN",
        "iso_n3": "124"
      },
      "geometry": {
        "type": "MultiPolygon",
        "coordinates": []
      }
    }]
  }
});
$.mockjaxSettings.logging = 1;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"></script>

<label for="countrySelect">Select a country from the list:</label>
<select id="countrySelect" name="countrySelect"></select>