Блог

У меня есть следующий код 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 .

Это должно сработать:

 $($.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() .

Если ваши данные уже находятся в форме массива, это действительно просто с помощью 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 предназначен специально как GET-запрос для извлечения json; ajax () может запрашивать любой глагол для возврата любого типа контента (хотя иногда это бесполезно). getJSON внутренне вызывает .ajax().

Вот пример кода, который пытается извлечь данные AJAX из /Ajax/_AjaxGetItemListHelp/ URL. При успешном выполнении он удаляет все элементы из выпадающего списка с помощью 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 в другом формате.

В большинстве компаний требовалась общая функциональность для нескольких выпадающих списков для всех страниц. Просто вызовите функции или передайте свои (DropDownID, jsonData, KeyValue, textValue)

     <script>

        $(document).ready(function(){

            GetData('DLState',data,'stateid','statename');
        });

        var data = [{"stateid" : "1","statename" : "Mumbai"},
                    {"stateid" : "2","statename" : "Panjab"},
                    {"stateid" : "3","statename" : "Pune"},
                     {"stateid" : "4","statename" : "Nagpur"},
                     {"stateid" : "5","statename" : "kanpur"}];

        var Did=document.getElementById("DLState");

        function GetData(Did,data,valkey,textkey){
          var str= "";
          for (var i = 0; i <data.length ; i  ){

            console.log(data);


            str = "<option value='"   data[i][valkey]   "'>"   data[i][textkey]   "</option>";

          }
          $("#" Did).append(str);
        };    </script>

</head>
<body>
  <select id="DLState">
  </select>
</body>
</html>