json - 如何正确地将 json 结果附加到选择选项

Question

如何正确地将 json 结果附加到选择选项，

示例 json 数据

阿贾克斯代码：

$.ajax({
        url: 'sessions.php',
        type: 'post',
        datatype: 'json',
        data: { from: $('#datepicker_from').val().trim(), to: $('#datepicker_to').val().trim() },
        sucess: function(data){
            var toAppend = '';
            //if(typeof data === 'object'){
                for(var i=0;i<data.length;i++){
                    toAppend += '<option>'+data[i]['id']+'</option>';
                }
            //}
            $('#sessions').append(toAppend);
        }
    });

html代码：

<p>Sessions: 
<select id="sessions"></select>

我已经设置为我的 php 文件

header("Content-Type: application/json");

Answer 1

用于$.each遍历从 ajax 调用收到的 JSON 数组。

注意：- 的拼写success，你已经写了sucess。

 success: function(data){
            var toAppend = '';
           $.each(data,function(i,o){
           toAppend += '<option>'+o.id+'</option>';
          });

         $('#sessions').append(toAppend);
        }

您可以直接在每个循环内附加到 DOM，但最好与字符串连接，然后稍后再添加到 DOM。这是一个更便宜的操作，因为在这种情况下您只访问 DOM 一次。不过，这在某些复杂的场景中可能不起作用。

Answer 2

success: function(data) {
     var options = "";
     for (var i = 0; i < data.length; i++) {
         options += "<option>" + data[i].id + "</option>";
     }
     $("#sessions").html(options);
 }

如果您的响应是多维数组，请尝试如下

success: function(data) {
    var options = '';
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j< data[i].length; j++){
            options += '<option value="' + data[i][j].product_id + '">' + data[i][j].name + '</option>';
        }
    }
    $("#products").html(options);
}

Answer 3

我希望这会帮助你追加

for(i=0; i<data.length; i++) {
    $('#sessions').append("<option value="+data[i].id+"/option>");                      
        }

Answer 4

让你在参数中接收json数据data

var obj = JSON.parse(data);
for(i=0; i<data.length; i++) {
    $('#sessions').append("<option value="+obj[i].id+">"+obj[i].name+"</option>");                      
}

Answer 5

请尝试以下代码，这可能会对您有所帮助。

我在 Spring Boot MVC 中使用的这些代码

JSON数据

[{"name":"Afghanistan","code":"af"},
{"name":"Albania","code":"al"},
{"name":"Algeria","code":"dz"}]

jQuery 代码

var jsonData = '${restData}';
var obj = JSON.parse(jsonData);
for (i in obj) {
$('#selectList').append(new Option(obj[i].name, obj[i].code));
}