如何使用 AJAX 创建表答案

【问题标题】：How to create table with AJAX如何使用 AJAX 创建表
【发布时间】：2017-07-27 11:58:02
【问题描述】：

我有三个列表

Devices    =     (Mango, Apple, Orange)
Lifetime    =     (100,200,100)
Status =     (Yes, No, Yes)

这些列表被分组为一个模板

template = {
     'Device'   :  Devices,
     'Lifetime' :  Lifetime,
     'Status'   :  Status,
}

我需要从上面显示的模板中为 AJAX 中的 Web 界面创建一个表：

DEvices  Lifetime   Status
Mango    100        Yes
Apple    200        No
Orange   100        Yes

如何在 html 中使用 AJAX 的脚本来完成这项工作？

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div id="wrapper">
            %include navbar.tmpl ovVersion=ovVersion, roverMode=roverMode

            <div id="page-wrapper">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Wireless Sensor</h1>
                    </div>
                </div>
                <script>
                    var n_dots = 1;
                    $( document ).ready(function() {
                        $.ajax({
                                dataType: "json",
                                url: "/wirelessSensor/dag",
                                success: updateForData,
                                error: errorOnAjax
                            });

                        function updateForData(json) {              

                         $("div").html("<table><tr><th>Devices></th><th>Lifelist</th><th>Status</th></tr>");
                         $.each(json.devices, function( index, value ) {
                           $("div").append("<tr><td>" + value + "</td><td>" + json.lifelist[index] + "<td></td><td>" + json.status[index] + "</td></tr>");
                             });
                         $("div").html("</table>"); 

                     }

                    function errorOnAjax(jqxhr, status, errorstr) {
                        var errText = (errorstr == null)
                                ? '' : ', error: ' + errorstr;
                        console.log('Ajax error: ' + status + errText);
                    }         

                });

                </script>


            </div>
        </div>
    </body>
</html>

我试过这样做。但我猜我的语法有问题

【问题讨论】：

您应该查看this 的答案。

标签： python html ajax bottle

【解决方案1】：

使用jQuery的每个函数循环遍历元素

$("div").html("<table><tr><th>Fruits></th><th>Price</th><th>Available</th></tr>");
$.each(Fruits, function( index, value ) {
    $("div").append("<tr><td>" + value + "</td><td>" + Price[index] + "<td></td><td>" + Available[index] + "</td></tr>");
    });
$("div").html("</table>");

【讨论】：

我尝试在脚本标签内运行它，但出现错误。