ajax解析json再html列表,如何使用jQuery / AJAX JSON数据更新HTML列表

我有一个?25个项目的列表(可能还会有更多项目)，还有一个输入文本字段，用户可以在其中输入关键字，在该字段上应该更新列表以仅反映与该关键字相对应的项目。

我想对PHP文件使用AJAX调用，该文件相应地以JSON样式返回结果。

作为该领域的新手，看了很多例子之后，我莫名其妙地陷入了AJAX调用和列表更新之间。

HTML：

• item 1

• item 2

....

JS：

// update the list

function updateGEGsList(updated_gegs)

{

// clear the existing list

$('#ul_geg li').remove();

$.each(updated_gegs, function(index,gegName) {

$('#ul_geg .list').append("li id='" + gegID +"' style='padding-left: 10px;'>" + gegName +"

")

});

}

AJAX通话：

// get data

$("#query2").keyup(

function()

{

$.ajax({

type: 'POST',

url: 'etc/php/autocomplete_mea.php',

data: 'term=' + $("#query2").val(),

dataType:"json",

success: function(response) {

updateGEGsList(data);

}

})

}

)

原则上，被调用的PHP文件将正确的结果发送回去。试了一下。

我的第一个问题是，通话无法正常进行。在输入字段中键入时，我收到" Uncaught ReferenceError：未定义数据"。

其次，对于列表的更新，AJAX返回是{ID，NAME}的数组，我不确定如何实现。

[{"id":"11","value":"Aichi Biodiversity Targets"},

{"id":"8","value":"Aichi Biodiversity Targets"},

{"id":"19","value":"Joint Convention on the Safety of Spent Fuel Management and on the Safety of Radioactive Waste Management"}]

非常感谢您的任何提示！

在ajax回调中，您获得了一个response变量，但是您将data传递给了未定义的更新函数。 更改为此：

success: function(response) {

updateGEGsList(response);

}

更新具有类型的对象的数组

{

id: '',

value: ''

}

使用for循环迭代响应(数组)并构建新的元素列表：

function updateGEGsList(updated_gegs)

{

var items = [];

for (var i in updated_gegs) {

var item = updated_gegs[i];

items.push('

' + item.value + '

');

}

$('#ul_geg').html(items.join(''));

}

@kapntzak：太好了！ 非常感谢。 对上述AJAX调用的小修正：应该为"类型：GET"。