用json数据填充jquery填充下拉列表

Question

我有以下jQuery代码.我能从服务器获取以下数据[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}].如何迭代并填充选择框id=combobox

$.ajax({
    type: 'POST',
    url: "<s:url value="/ajaxMethod.action"/>",
    data:$("#locid").serialize(),
    success: function(data) {
        alert(data.msg);

                //NEED TO ITERATE data.msg AND FILL A DROP DOWN
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    dataType: "json"
});

还有什么区别使用.ajax和$.getJSON.

Answer 1

这应该做的伎俩:

$($.parseJSON(data.msg)).map(function () {
    return $('<option>').val(this.value).text(this.label);
}).appendTo('#combobox');

这是ajax和getJSON(来自jQuery文档)之间的区别:

[getJSON]是一个简写的Ajax函数,相当于:

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

编辑:要清楚,问题的一部分是服务器的响应返回一个如下所示的json对象:

{
    "msg": '[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]'
}

...所以msg需要手动解析该属性$.parseJSON().

Answer 2

如果您的数据已经是数组形式,那么使用jQuery非常简单:

 $(data.msg).each(function()
 {
     alert(this.value);
     alert(this.label);

     //this refers to the current item being iterated over

     var option = $('<option />');
     option.attr('value', this.value).text(this.label);

     $('#myDropDown').append(option);
 });

.ajax()比.getJSON()一个更灵活,getJson专门用作检索json的GET请求; ajax()可以在任何动词上请求获取任何内容类型(尽管有时这是没用的).getJSON在内部调用.ajax().

Answer 3

下面是一个代码示例,它试图从/Ajax/_AjaxGetItemListHelp/URL中获取AJAX数据.成功后,它会使用id= 从下拉列表中删除所有项目OfferTransModel_ItemID,然后根据AJAX调用的结果填充新项目:

if (productgrpid != 0) {    
    $.ajax({
        type: "POST",
        url: "/Ajax/_AjaxGetItemListHelp/",
        data:{text:"sam",OfferTransModel_ItemGrpid:productgrpid},
        contentType: "application/json",              
        dataType: "json",
        success: function (data) {
            $("#OfferTransModel_ItemID").empty();

            $.each(data, function () {
                $("#OfferTransModel_ItemID").append($("<option>                                                      
                </option>").val(this['ITEMID']).html(this['ITEMDESC']));
            });
        }
    });
}

返回的AJAX结果有望返回编码为AJAX数组的数据,其中每个项包含ITEMID和ITEMDESC元素.例如:

{
    {
        "ITEMID":"13",
        "ITEMDESC":"About"
    },
    {
        "ITEMID":"21",
        "ITEMDESC":"Contact"
    }
}

该OfferTransModel_ItemID列表框填充了上述数据和代码应该是这样的:

<select id="OfferTransModel_ItemID" name="OfferTransModel[ItemID]">
    <option value="13">About</option>
    <option value="21">Contact</option>
</select>

当用户选择时About,表单提交13为该字段的值以及21用户选择时Contact等等.

如果您的服务器以不同的格式返回URL,则可以自由修改上述代码.