Question

我已经创建了springboot应用程序，并且我有两个HTML页面，分别是“ icecream.html”和“ orders.html”。现在，我想从订单表中检索数据（在postgresql中），并将其显示为orders.html页面。

这是我的订单控制器类

@RestController(value = "/icecream") 
public class OrderController {
    @Autowired 
    public IcecreamDao icecreamDao; 

    @GetMapping("/orders") 
    public List<Icecream> icecreamInformation() {
        List<Icecream> icecreams = icecreamDao.getData(); 
        return icecreams; 
    }

}

这是我的orders.html页面

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript"  src="js/call.js"> </script>

    <script src="Scripts/jquery-1.9.1.min.js"></ script >

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.min.js"> </ script >
    <script src="Scripts/bootstrap.min.js"> </ script >

    <script>
        $(document).ready(function () {
            productList();
            });
    </script>

</head>
<body>
    <div class="container">
        <div class="starter-template">
            <fieldset>
                <h1> <u>Your Order</u> </h1>

                <table id = "productTable" border="1">
                    <th>Order Number</th>
                    <th>Order Date</th>
                    <th>Quantity</th>
                    <th>Item Name</th>
                    <th>Price</th>
                    <th>Total</th>
                </table>
            </fieldset>
        </div>
    </div>
</body>
</html>

这是我的通话.js文件

function productList() {
    $.ajax({
        url :'/orders',
        type : 'GET',
        dataType : 'json',
        success : function(icecreamList) {
            productListSuccess(icecreamList);
        },
        error : function(request, message, error) {
            handleException(request, message, error);
        }
    });
}

function productListSuccess(icecreamList) {

    $.each(icecreamList, function(index, product) {
        productAddRow(product);
    });
}

function productAddRow(product) {

    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("<tbody></tbody>");
    }
    $("#productTable tbody").append(productBuildTableRow(product));
}

function productBuildTableRow(product) {

    var ret = "<tr>" + "<td>" + product.name + "</td>" + "<td>" +product.price
            + "</td>" + "<td>" + product.qty + "</td>" + "<td>" + product.total
            + "</td>" + "</tr>";
    return ret;
}

function handleException(request, message, error) {

    var msg = "";
    msg += "Code: " + request.status + "\n";
    msg += "Text: " + request.statusText + "\n";
    if (request.responseJSON != null) {
        msg += "Message" + request.responseJSON.Message + "\n";
    }
    alert(msg);
 }

它已成功从我的数据库提供了一组数据。但不给它作为我的html页面。请有人指导我出什么问题...

Answer 1

我已经在您的HTML和JS中复制了此代码段。因为您说过ajax成功返回，所以我只在一些测试数据中包含了快乐的js路径。我看到的唯一问题是您的数据obj中没有订单号或订单日期。结果，您的表将移至页眉。由于下面包含的这些功能正在运行，因此我建议您使用开发人员工具来查看是否存在语法错误，导致您的js崩溃。我的猜测是，如果您将脚本标签从html的前面移到后面，则一切都将开始单击。确认使用您的开发者控制台。它可能会引发有关HTML元素不存在的错误，因为js在HTML完成加载之前就已执行。一个安全的经验法则是始终将js粘贴在文件底部。

function productListSuccess(icecreamList) {

    $.each(icecreamList, function(index, product) {
        productAddRow(product);
    });
}

function productAddRow(product) {

    if ($("#productTable tbody").length == 0) {
        $("#productTable").append("<tbody></tbody>");
    }
    $("#productTable tbody").append(productBuildTableRow(product));
}

function productBuildTableRow(product) {

    var ret = "<tr>" + "<td>" + product.name + "</td>" + "<td>" +product.price
            + "</td>" + "<td>" + product.qty + "</td>" + "<td>" + product.total
            + "</td>" + "</tr>";
    return ret;
}
productListSuccess([
  {
    name: 'Test 1',
    price: 1,
    qty: 1,
    total: 1
   },
   {
    name: 'Test 2',
    price: 2,
    qty: 2,
    total: 4
   }
]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="starter-template">
            <fieldset>
                <h1> <u>Your Order</u> </h1>

                <table id = "productTable" border="1">
                    <th>Order Number</th>
                    <th>Order Date</th>
                    <th>Quantity</th>
                    <th>Item Name</th>
                    <th>Price</th>
                    <th>Total</th>
                </table>
            </fieldset>
        </div>
    </div>
</body>

如何在HTML表格中显示JSON对象？

1 个答案: