使用ajax使用来自JSON文件的数据填充SELECT

Question

我是使用JSON文件进行Web开发的新手，我很感兴趣，因为它在数据存储方面的实用性和强大功能。现在，我想通过路径使用JSON文件，而不是将JSON添加到同一页面，因为它使页面充满了JSON数据。昨天我有以下代码，但只将JSON文件添加到同一页面而不是单独的一个。如何使用JSON文件路径而不是将JSON添加到同一页面？

HTML

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="form-group">
        <label for="supplier_bank_name">Bank Name</label>
        <select class="form-control selectpicker" data-live-search="true" id="supplier_bank_name" name="supplier_bank_name"></select>
    </div>
</div>

以前的代码
此代码可以很好地工作，但JSON只在同一页面中。

var allbanks = {
        banks:[
            {
                "index": 0,
                "bankname": "1st Source Bank",
                "location": "USA",
                "website": "www.1stsource.com"
            },
            {
                "index": 1,
                "bankname": "1st Summit Bank",
                "location": "North America",
                "website": "www.1stsummit.com"
            },
            {
                "index": 2,
                "bankname": "A.J. Smith Federal Savings Bank",
                "location": "USA",
                "website": "www.ajsmithbank.com"
            }
        ]
    };

    $(document).ready(function () {
        var listItems = '<option selected="selected" value="0">Select Bank</option>';

        for (var i = 0; i < allbanks.banks.length; i++) {
            listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>";
        }

        $("#supplier_bank_name").html(listItems);
    });

SCRIPT TODAY
不工作并寻找解决方案

var allbanks = (function () {
    var allbanks = null;
    $.ajax({
        'async': false,
        'global': false,
        'url': 'js/allbanks.json',
        'dataType': "json",
        'success': function (data) {
            allbanks = data;
        }
    });
    return allbanks;
})(); 


$(document).ready(function () {
    var listItems = '<option selected="selected" value="0">Select Bank</option>';

    for (var i = 0; i < allbanks.banks.length; i++) {
        listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>";
     }

    $("#supplier_bank_name").html(listItems);
});

JSON

{
    "banks": [
        {
            "index": 0,
            "bankname": "1st Source Bank",
            "location": "USA",
            "website": "www.1stsource.com"
        },
        {
            "index": 1,
            "bankname": "1st Summit Bank",
            "location": "North America",
            "website": "www.1stsummit.com"
        },
        {
            "index": 2,
            "bankname": "A.J. Smith Federal Savings Bank",
            "location": "USA",
            "website": "www.ajsmithbank.com"
        }
    ]
}

Answer 1

由于$.ajax是异步函数，allbanks中的代码将按此顺序执行：

1. 将allbanks分配给null
2. 提出ajax请求
3. 返回allbanks，仍然设置为null，因为ajax请求尚未返回。
4. 接收数据并将其分配给allbanks（这不会退回到函数中，也不会设置为第一行的allbanks变量）

要解决此问题，您应该使用ajax请求的success部分中的数据。

function createSelectItems(data) {
    var listItems = '<option selected="selected" value="0">Select Bank</option>';

    for (var i = 0; i < data.banks.length; i++) {
        listItems += "<option data-tokens='" + data.banks[i].bankname + "' value='" + data.banks[i].bankname + "'>" + data.banks[i].bankname + "</option>";
    }

    $("#supplier_bank_name").html(listItems);
}

$(document).ready(function () {
    $.ajax({
        'async': false,
        'global': false,
        'url': 'js/allbanks.json',
        'dataType': "json",
        'success': function (data) {
            createSelectItems(data);
        }
    });
}); 

修改

见下面的评论：

<强> allbank_connect.js

// Code goes here
var allbanks = (function () {
  var allbanks = null;

  $.ajax({
    'async': false,
    'global': false,
    'url': 'js/allbanks.json',
    'dataType': "json",
    'success': function (data) {
        allbanks = data;
    }
  });

  return allbanks;
})();

$(document).ready(function () {
  var listItems = '<option selected="selected" value="0">Select Bank</option>';

  for (var i = 0; i < allbanks.banks.length; i++) {
    listItems += "<option data-tokens='" + allbanks.banks[i].bankname + "' value='" + allbanks.banks[i].bankname + "'>" + allbanks.banks[i].bankname + "</option>";
  }

  $("#supplier_bank_name").html(listItems);
});