jquery - 从外部文件收集 JSON 数据

Question

我有一个名为 destinations.json 的 JSON 文件，我想从此文件中获取数据以显示在 HTML 的下拉框中。JSON文件如下图

{
    "Destinations": [
    {
        "destinationName": "London",
        "destinationID": "lon"
    },
    {
        "destinationName": "New York",
        "destinationID": "nyc"
    },
    {
        "destinationName": "Paris",
        "destinationID": "par"
    },
    {
        "destinationName": "Rome",
        "destinationID": "rom"
    }
    ]
}

到目前为止，我已经确保 jquery 库可用，然后创建了一个函数，该函数将在单击时从 JSON 文件中获取数据，如下所示。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $('#fetch').click(function() {
    $.post('http://jonathangatenby.co.uk/Candidate/json/destinations.json', {}, function(data) {
        $.each(data.Destinations, function(i, v) {
            $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
        });
    });
});
</script>

从这里开始，我有一个简单的 HTML，它会给我一个下拉框。

<select id="destinations">
    <option value="">Select</option>
</select>
<a href="#" id="fetch">Fetch JSON</a>

这似乎不起作用，所有文件都在同一台服务器上。

Answer 1

试试这个 jquery 代码：

$(function() {
    $('#fetch').click(function(){
        $.getJSON('yourjsonfile.json', function(data) {
            destinations = data['Destinations']

            $.each(destinations, function(id, destination) {
                $('select').append('<option value="">'+destination["destinationName"]+'</option>')
            })
        });
    })
})