根据下拉列表中的用户输入调用JSON文件

Question

我有一个countries.json文件，其中包含国家和地区信息。我让用户从countries.json文件中通过Python生成的下拉列表选择国家。这是有效的，国家被选中。但是因为python在后台工作，所以我不能调用第二阶段，"状态"；除非用户首先提交表单。

因此，我可以用以下代码调用JavaScript中选择的国家：

document.getElementById("country").addEventListener("change", function() {
let country_chosen = document.getElementById("country").value; 
});

这是有效的。因此，用户已经输入了国家，根据更改，国家的名称现在在控制台中。

JSON文件中的单个条目可能如下所示(这只是第一个(：

{
"code2": "AF",
"code3": "AFG",
"name": "Afghanistan",
"capital": "Kabul",
"region": "Asia",
"subregion": "Southern Asia",
"states": [
{
"code": "BDS",
"name": "Badakhshān",
"subdivision": null
},

例如，如果用户从Python生成的下拉列表中选择阿富汗，那么他们也可以根据阿富汗的所有州等选择一个州。

输入选择基于Jinja模板：

<select name="country" id="country" ref="country">
{% for country in countries %}
{% if profile.country == country.name %}
<option value="{{ country.name }}" selected>{{ country.name }}</option>
{% else %}
<option value="{{ country.name }}">{{ country.name }}</option>
{% endif %}
{% endfor %}
</select>

所以，我想重复类似的输入，除了由JS从前端驱动。

所以我将有一个选择名称＝"；状态"；因此Python可以在提交时读取输入，但这部分中的其他内容都需要由JS驱动。因此，for循环将呼叫该国的所有州。

但不幸的是，这是我以前从未做过的事情。我从来没有用JS来调用JSON文件，更不用说我自己制作(好吧，复制(并存储在网站上的JSON文件了。那么，我从哪里开始呢？我有所选国家的名称，现在我如何调用JSON文件来填充状态输入下拉列表？

谢谢你在这个问题上帮助我朝着正确的方向前进。

我在jQuery中尝试了这个，但我什么都没有得到，不是错误，什么都没有：

$.ajax({
url: 'countries.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
$.each(data['states'], function(index, value){
console.log(index);
console.log(value['name']);
console.log(country_chosen);
})
}
});

Answer 1

使用fetch、ES6:

fetch('my/url') // Call the fetch function passing the url of the API as a parameter
.then(function(data) {
// Your code for handling the data you get from the API
})
.catch(function() {
// This is where you run code if the server returns any errors
});

与XMLHttpRequest，香草JS:

var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();