Question

我有以下内容：

<script type="text/javascript" src="jquery.js"></script>

<script>
$.ajax({
    'async': true,
    'type': "get",
    'url': "service.php",
    'crossDomain': true,
    'dataType': 'json',
    'success': function (response) {

        if (response.result && response.result == "success") {
            if (response.data) {
                console.log("Found data: " + response.data);

            }
            else {
                console.log("Unable to find data");
            }
        }
        else {
            console.log("Unknown error:  " +
                (response.error ? response.error : ""));
        }
    },
    'error': function (response) {

        console.log("Error : " + JSON.stringify(response));
    }
});
</script>

service.php文件中包含以下内容：

<?php
$data = array("name" => "John Doe", "state" => "Somewhere","city" => 
"Someplace","zip" => "Somezip");
echo json_encode(array("result" => "success", "data" => $data));
?>

我需要更改代码，而不是记录到控制台，而是在HTML表格中显示数组中的数据。我是新手，我的同事和我一直在试图想出这个有趣的事情。我们都陷入困境，因为我们没有人在工作中使用AJAX或JQUERY。我一直试图寻找答案，但我对它甚至不知道要搜索什么都知之甚少。

Answer 1

两种基本方法是for...in（显示）或jQuery's each()。

var buffer = ['<table><thead><tr>'];
// draw the header
for(var name in response.data) buffer.push(`<th>${name}</th>`);
// draw the body
buffer.push("</tr></thead><tbody><tr>");
for(var name in response.data) buffer.push(`<td>${response.data[name]}</td>`);
buffer.push("</tr></tbody></table>");
// put it all together
var html = buffer.join('');

Answer 2

＆＃13;

if (response.data) {
    var obj = response.data;
    var table = "<table><tr><th>Name</th><th>State</th><th>City</th><th>Zip</th></tr><tr><td>"+obj.name+"</td><td>"+obj.state+"</td><td>"+obj.city+"</td><td>"+obj.zip+"</tr></table>";
    $(".select-a-div-where-you-output-this").html(table);          
}

＆＃13;

使用Ajax和JSON创建HTML表

2 个答案: