0

我正在尝试使用 JSON 文件中的数据填充表单（onClick）。我可以从数组中成功完成，但是当我尝试解析本地（与 .html 相同的文件夹）JSON 文件时，它不起作用。

<script>
var marks = [];
$(document).ready(function() {
    $("#RQdata").click(function(event) {
        $.getJSON('test.json', function(data) {
            $.each(data.markers, function(key, val) {
                marks.push(val[key]);


            });
        });
    });
});

function populateList() {
    for (var i = 0; i < marks.length; i++) {
        var mark = new Option(marks[i].name, markers[i].latlng);
        document.getElementById('locationList').options.add(mark);
    }
}
</script>


<h2>List</h2>
<form name="aForm">
  <select name="locationList" id="locationList" size="6" onChange="alert(value);" style=" width:800px;owerflow: auto;">
  </select>
  <input type="button" id="RQdata" name="Request Data" value="Request Data" >
</form>

我的 test.json

{"markers":
            [{"latlng":[55.587,17.044],"name":"Some name 1"},
            {"latlng":[55.577,17.044],"name":"Some name 2"},
            {"latlng":[55.507456,17.617585],"name":"Some name 3"},
            {"latlng":[55.25642,17.154904],"name":"Some name 4"},
            {"latlng":[55.103217,17.07776],"name":"Some name 5"}]}

最好的祝福

4

1 回答 1

0

您的代码中有几个错误，下面的版本有效。

var marks = [];
$(document).ready(function() {
$("#RQdata").click(function(event) {
    $.getJSON('test.json', function(data) {
    $.each(data.markers, function(key, val) {
        marks.push(val);  //It should be val instead of val[key]
    });

    populateList();  // You didn't call this function here
    });
});
});

function populateList() {
for (var i = 0; i < marks.length; i++) {
    var mark = new Option(marks[i].name, marks[i].latlng);  //marks instead of markers here
    document.getElementById('locationList').options.add(mark);
}
}

请使用检查器或其他东西进行调试。

此外，正如评论中提到的@matt，某些浏览器（如 Chrome）将禁止 XHR 访问本地文件。

于 2012-11-11T15:36:46.083 回答