javascript - JQuery:解析 ajax 调用与嵌入的 str

Question

我很困惑，因为我有两个函数，一个使用 ajax 获取数据，另一个从字符串中获取数据。

function loadMenuData() {
    $.ajax({
    url: "./shoulders.json",
    success: function(data) {
        dataObj = $.parseJSON(data);
    $.each(dataObj, function( key, value) {
        $(document).find("#dropDownDest").append($('<option></option>').val(value.id).html(value.name));
    });
    }
});
}
function loadMenuDataX() {
    var str = '[{"id":"A","name":"Bart"},{"id":"B", "name":"Joe"},{"id":"C", "name":"Gomer"}]';
    dataObj = $.parseJSON(str);
    $.each(dataObj, function( key, value) {
        $(document).find("#dropDownDest").append($('<option></option>').val(value.id).html(value.name));
    });
}

我创建了文件 shoulders.json购买粘贴str在单引号之间 '进入文件。如果我调用 loadMenuX , 它填写 <select></select>正确。如果我调用 loadMenu , 它不填写任何内容。

1. 我试过了JSON.parse而不是上面的并获得相同的行为。

2. 我无法使用 $("#dropDownDest")并且不得不使用 $(document).find .为什么？

3. 每次循环访问 DOM 似乎有些过分。有什么更好的方法来制作可以工作并且更好的 ajax 版本？

Answer 1

What would be a better way to do the ajax version THAT WOULD WORK and be better?

因为您正在尝试获取 JSON 文件，所以更好的方法是使用 jQuery.getJSON() ，这样你就可以确定返回的结果是json格式的:

$.getJSON( "./shoulders.json", function( json ) {
    $.each(json, function( key, value) {
        $("#dropDownDest").append('<option value="+value.id+">'+value.name+'</option>');
    });
});

希望这对您有所帮助。