【问题标题】：Jquery ajax populate dropdown with json response dataJquery ajax 使用 json 响应数据填充下拉列表
【发布时间】：2014-04-07 07:37:12
【问题描述】：

我知道对此有很多问题，但我仍然不确定该怎么做。

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

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

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

{"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"}]}

这是我的 $.post 代码。

$.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。

有人可以提供一些指针或代码建议吗？

谢谢凯文

【问题讨论】：

标签： jquery ajax arrays json html.dropdownlistfor

【解决方案1】：

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

HTML：

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

JS：

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>");
                });
            })
       }
    });
});

A fiddle that contains the answer

【讨论】：

嗨。这确实让我走上了正轨。但是我不得不使用 run a parseddata = JSON.parse(data);在循环之前。如果不是，我会在主循环的第一次迭代中遇到一些 javascript 错误。我想知道为什么您的示例不必使用 JSON.parse？
这取决于您从服务器返回的响应，它可以作为 json 返回，或者必须解析字符串化的 json，我不确定设置 dataType 后响应会发生什么.

【解决方案2】：

您可以使用$.each() 函数循环遍历数据：

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

})

假设您的服务器端脚本没有设置正确的 Content-Type: application/json 响应标头，您需要使用 dataType: 'json' parameter 向 jQuery 指示这是 JSON。

Refrence

【讨论】：