Javascript ajax响应未在html中填充<；表>；标签_Javascript_Jquery

Javascript ajax响应未在html中填充<；表>；标签

javascript jquery

Javascript ajax响应未在html中填充<；表>；标签,javascript,jquery,Javascript,Jquery,不太确定我在这里哪里出错了，但我希望响应的内容填充到html标记中。我想首先我要附加table标签header。然后让函数填充表标记的内部。最后关上桌子。但这里有些不对劲没有生成任何错误。所有数据都显示在页面上，但不在表标记内，以便可以应用CSS类 HTML正文 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <me

不太确定我在这里哪里出错了，但我希望响应的内容填充到html标记中。我想首先我要附加table标签header。然后让函数填充表标记的内部。最后关上桌子。但这里有些不对劲

没有生成任何错误。所有数据都显示在页面上，但不在表标记内，以便可以应用CSS类

HTML正文

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./assets/javascript/getdata.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">

</head>
<body>
    <div class="page-header">
        <h1>Data Table</h1>
    </div>
    <div id="ufo">ajax_response_goes_here</div>
</body>
</html>


引导示例
数据表
ajax\u响应\u转到这里

JAVASCRIPT

function displayrecipes() {

    $.ajax({
            type: "GET",
            url: "https://data_url",
            dataType: "json"
        })
        .done(function (response) {

            $('#ufo').append("<table id='ufo-table'>")
            $('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")

            for (var i = 0; i < 10; i++) {

                $('#ufo').append("<tr><td>" + i + "</td><td>" + response[i].spaceships +
                    "</td><td>" + response[i].planets + "</td></tr>")
            }

            $('#ufo').append("</table>")
        })
}

displayrecipes()

函数displayrecipes（）{
$.ajax({
键入：“获取”，
url:“https://data_url",
数据类型：“json”
})
.完成（功能（响应）{
$（'#ufo'）。附加（“”）
$（“#ufo”）.append（“数据1数据2数据3”）
对于（变量i=0；i<10；i++）{
$（'#ufo'）。追加（“+i+”+response[i]。宇宙飞船+
“+响应[i]。行星+”）
}
$（'#ufo'）。附加（“”）
})
}
displayrecipes（）

表选项卡中没有响应数据。相反，它似乎出现在表标记之外

与其多次追加，不如声明一个变量并追加html。在完成附加html后，您最终应该将字符串附加到div标记

var content="<table id='ufo-table'>";
    content+="<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>";

        for (var i = 0; i < 10; i++) {

            content+="<tr><td>" + i + "</td><td>" + response[i].spaceships +
                "</td><td>" + response[i].planets + "</td></tr>";
        }
    content+="</table>";
    $('#ufo').append(content);

var content=”“；
内容+=“数据1数据2数据3”；
对于（变量i=0；i<10；i++）{
内容+=“”+i+“”+response[i]。宇宙飞船+
“+响应[i]。行星+”；
}
内容+=”；
$（'#ufo'）。追加（内容）；

与其多次追加，不如声明一个变量并追加html。在完成附加html后，您最终应该将字符串附加到div标记

var content="<table id='ufo-table'>";
    content+="<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>";

        for (var i = 0; i < 10; i++) {

            content+="<tr><td>" + i + "</td><td>" + response[i].spaceships +
                "</td><td>" + response[i].planets + "</td></tr>";
        }
    content+="</table>";
    $('#ufo').append(content);

var content=”“；
内容+=“数据1数据2数据3”；
对于（变量i=0；i<10；i++）{
内容+=“”+i+“”+response[i]。宇宙飞船+
“+响应[i]。行星+”；
}
内容+=”；
$（'#ufo'）。追加（内容）；

这将创建一个表并将其附加到#ufo

$（'#ufo'）。附加（“”）

这将创建一个表行并将其附加到#ufo

$（“#ufo”）.append（“数据1数据2数据3”）

如果希望表行位于表中，则必须将其附加到表中，而不是div

$（'#ufo'）。附加（“”）
这没用。jQuery不会用结束标记构造元素

尽管抽象。您使用的是DOM元素，而不是原始HTML。不能将开始标记附加到元素，只能附加到另一个元素
这将创建一个表并将其附加到#ufo

$（'#ufo'）。附加（“”）

这将创建一个表行并将其附加到#ufo

$（“#ufo”）.append（“数据1数据2数据3”）
如果希望表行位于表中，则必须将其附加到表中，而不是div

$（'#ufo'）。附加（“”）
这没用。jQuery不会用结束标记构造元素

尽管抽象。您使用的是DOM元素，而不是原始HTML。不能将开始标记附加到元素，只能附加到另一个元素
我认为在for循环中，你是
$（“#ufo”）
相反，你应该使用
$（“#ufo table”）
通过这样做，你可以在表中附加表行和表数据，然后在
$（“#ufo”）中附加表我认为在for循环中你是$（“#ufo”），而应该使用$（“#ufo table”）通过这样做，您可以将表行和表数据附加到表中，然后将表附加到$（“#ufo”）您得到的任何错误？？完全没有错误。。数据已绘制，但不完全在表中。一个副作用是没有应用.css表类。我刚刚添加了控制台的快照。。显示已创建表，但其中没有内容。。我想这是我插入.append和标记的地方。不确定您是否有任何错误？？完全没有错误。。数据已绘制，但不完全在表中。一个副作用是没有应用.css表类。我刚刚添加了控制台的快照。。显示已创建表，但其中没有内容。。我想这是我插入.append和标记的地方。不确定哇……我觉得自己很笨。我完全忘记了，对于DOM元素，您必须从本质上构建html。你是个天才。它工作得很好！！非常感谢你。万分感谢！！哇……我觉得自己很笨。我完全忘记了，对于DOM元素，您必须从本质上构建html。你是个天才。它工作得很好！！非常感谢你。万分感谢！！ $('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>") $('#ufo').append("</table>")