3

如何正确地将 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");
4

5 回答 5

13

用于$.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 一次。不过,这在某些复杂的场景中可能不起作用。

于 2013-04-23T03:54:44.680 回答
3
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);
}
于 2016-11-28T04:31:13.963 回答
2

我希望这会帮助你追加

for(i=0; i<data.length; i++) {
    $('#sessions').append("<option value="+data[i].id+"/option>");                      
        }
于 2013-04-23T03:56:04.693 回答
1

让你在参数中接收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>");                      
}
于 2020-12-28T06:20:58.343 回答
0

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

我在 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));
}
于 2019-08-19T12:43:50.067 回答