Jquery ajax使用json响应数据填充下拉列表

我知道在这个问题上有很多疑问，但我仍然不知道该怎么办

我有一个名为“CuisineForm”的HTML表单，在用户选择烹饪类型后，AJAX将表单发送到服务器。AJAX调用工作正常，服务器使用JSON响应进行响应，该响应包含此特定菜肴的所有服务时间。这些服务时间分为早餐、午餐和晚餐

这些时间需要以相同的形式填充到3个单独的下拉列表中。但我真的不知道如何处理JSON结果来填充表单中的3个下拉列表。

下面是来自PHP服务器端脚本的JSON响应。 请注意，这是在PHP脚本中使用“echo json_encode（）”生成的

这是我的$邮政编码

$.post( "gettimeslots", $( "#CuisineForm" ).serialize(), function() {
          alert( "success" );
        })
          .done(function(data) {
            // Not sure what code to write here to populate dropdown

          })
          .fail(function() {
            alert( "There was a problem getting the dropdown values!" );
          })
          .always(function() {
            alert( "always" );
        });

这是我要填充的下拉列表

<select name="breakfasttimes" id="breakfasttimes"></select>
<select name="lunchtimes" id="lunchtimes"></select>
<select name="dinnertimes" id="dinnertimes"></select>

大多数实现倾向于使用$.getJSON。但如上所示，我使用$.post代替。请告诉我是否应该使用$.getJSON

有人能提供一些提示或代码建议吗

谢谢

---

Kevin

您可以使用

$。each（）

函数循环遍历数据：

.done(function(data) {
$.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });

})

.done（函数（数据）{
$.each（数据、函数（索引、元素）{
$（'body'）。追加（$（''）{
text:element.name
}));
});
})

假设服务器端脚本没有设置正确的

Content-Type:application/json

响应头，则需要使用

dataType:'json'参数向jQuery指示这是json

这是一把包含完整答案的小提琴

HTML:



JS:

var data={“早餐”：[{“09:00:00”：“9:00 am”}、{“09:30:00”：“9:30 am”}、“午餐”：[{“12:00:00”：“12:00 pm”}、{“12:30:00”：“12:30 pm”}、“晚餐”：[{“19:00:00”：“7:00 pm”}、{“19:30:00”：“7:30 pm”}；
//将此代码放入“完成回调”中
var$elements=$（“#早餐、午餐、晚餐”）；
$.each（数据、函数（dataKey、dataVal）{
$elements.每个（功能（多梅尔基、多梅尔瓦尔）{
if（dataKey==domElVal.id）{
$.each（数据值，函数（时间键，时间值）{
$.each（timeVal，函数（timePropKey，timePropVal）{
$（domElVal）.append（“+timePropVal+”）；
});
})
}
});
}); 

你好。这确实让我走上了正确的道路。但是，我必须运行parseddata=JSON.parse（数据）；在循环通过它之前。如果不是，我会在主循环的第一次迭代中得到一些javascript错误。我想知道为什么您的示例不必使用JSON.parse？这取决于您从服务器返回的响应，它可以作为JSON返回，或者必须解析字符串化的JSON，我不确定设置数据类型后响应会发生什么。
.done(function(data) {
$.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });

})

<select name="breakfast" id="breakfast"></select>
<select name="lunch" id="lunch"></select>
<select name="dinner" id="dinner"></select>

var data = {"breakfast":[{"09:00:00":"9:00 am"},{"09:30:00":"9:30 am"}],"lunch":        [{"12:00:00":"12:00 pm"},{"12:30:00":"12:30 pm"}],"dinner":[{"19:00:00":"7:00 pm"},{"19:30:00":"7:30 pm"}]};

// Put this code inside of the "done callback"
var $elements = $('#breakfast, #lunch, #dinner');
$.each(data, function (dataKey, dataVal) {
    $elements.each(function(domElKey, domElVal){
        if (dataKey === domElVal.id) {
            $.each(dataVal, function(timeKey,timeVal){
                $.each(timeVal,function(timePropKey, timePropVal){
                $(domElVal).append("<option>"+timePropVal+"</option>");
                });
            })
       }
    });
});