Question

我已经在这个问题上挣扎了一段时间，但我似乎无法弄明白。我正在尝试遍历JSON对象并将每个数组的数据附加到index.php中的div。但它不能以某种方式工作，但我可以console.log数据但不附加数据。

var result;
getData();

function getData() {
    $.ajax({
        type: "POST",
        url: 'api/api.php',
        data: {
            'information' : 'info'
        },
        async: false,
        success: function(data) {
            result = data;
        },
        dataType: 'HTML'
    });

    result = $.parseJSON(result);
    //console.log(result[1].naam);
}

function dumpData(){
    console.log(test);
    for(var i = 0; i <= result.length; i++) {
        console.log(result[i].naam);
        $('<tr>').append(
            $('<td>').text(result[i].id),
            $('<td>').text(result[i].naam),
            $('<td>').text(result[i].brouwer)
        ).appendTo('#test');
    }
}

console.log('Loaded data.');
dumpData();
console.log('Dumped data.');

的index.php：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/Database.js"></script>

<body>
    <div id="test"></div>
</body>

更新 dataType意味着是JSON而不是HTML，这就是问题所在。

Answer 1

执行正在尝试的操作的规范方法是不使用async：false，在调用成功时附加并将行附加到表中。

您还可以使用Activity

循环一次

此外，您的代码依赖于结果是正确的JSON而不是

中的HTML

<=

var result = [ 
  { "id":"0", "naam":"Thom", "brouwer":"Heineken" },
  { "id":"1", "naam":"Bram", "brouwer":"Amstel" },
  { "id":"2", "naam":"Aad", "brouwer":"Grolsch" } // no comma on the last
  ];


function dumpData(result){
    console.log(result);
    for(var i = 0; i < result.length; i++) {
        $('<tr>').append(
            $('<td>').text(result[i].id),
            $('<td>').text(result[i].naam),
            $('<td>').text(result[i].brouwer)
        ).appendTo('#test');
    }
}

console.log('Loaded data.');
dumpData(result);
console.log('Dumped data.');

我个人将Ajax编码为

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody id="test"></tbody>
</table>

并且

function getData() {
  $.ajax({
    type: "POST",
    url: 'api/api.php',
    data: {
        'information' : 'info'
    },
    success: function(data) {
        dumpData(data)
    },
    dataType: 'JSON'
  });
}

Answer 2

您可以尝试直接在循环中设置HTML以进行div测试。

Array
(
    [0] => Air
    [1] => Conference
    [2] => Fee
    [3] => Rail
    [4] => Other
    [5] => Car
    [6] => Hotel
)

而不是

$('#test').html('<tr><td>'"+ result[i].id +"'</td><td>'"+ result[i].naam +"'</td><td>'"+ result[i].brouwer +"'</td></tr>');

无法附加变量但可以控制台记录它

2 个答案: