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

Posted 2023-03-05

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

【英文标题】：Using jQuery to Populate <select> element in HTML document via JSON data

【发布时间】：2021-10-15 23:16:41

【问题描述】：

我正在尝试使用 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 部分，只是为了尝试让它的前半部分工作。

【问题讨论】：

你能分享一个更准确的data的例子吗？

嗨，我想我明白你的意思了，我添加了更多的 JSON 文件内容来显示数据。我还在我的项目中添加了一个 PHP 文件，以尝试帮助进一步解码 JSON 文件

@Kizzy：你是说 PHP 代码抛出错误并且没有返回预期的数据？如果是这种情况，那么这实际上与问题中的问题无关，因为服务器端出现故障。

project1\libs\json\countryBorders.geo.json 是您服务器上的本地文件，对吗？问题一：为什么要使用curl来读取本地文件？问题 2：为什么首先使用 PHP 代理脚本将本地文件发送到浏览器？让客户端直接下载该文件，而不是通过PHP来获取它不是更容易吗？

@Kizzy: “我认为我认为 jQuery/javascript 能够解析 JSON 文件中的数据可能是错误的” - JSON 代表“JavaScript Object Notation "，它可以被 JavaScript 原生读取。听起来你此时的努力过于复杂了。如果您不需要 PHP 参与，那么我建议您只在 AJAX 操作中获取 JSON 文件本身。

【参考方案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>

【讨论】：

非常感谢。 ）。也许我应该更多地坚持奥卡姆剃刀……非常感谢，再次。