10.6.2 浏览所有流拍物品

发表于 更新于 分类于 ， ， Waline： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

10.6.2 浏览所有流拍物品

浏览所有流拍物品需要调用前端处理组件的getFailItems()方法,调用该方法无须执行权限检查。所有用户都可以直接调用。当用户单击页面上方的”浏览流拍物品”链接时,将发送获取所有流拍物品的请求,对应的函数如下。
程序清单：codes\10\auction\WebContent\js\viewFail.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 异步加载所有的流拍物品 
$(function() {
    $.get("auction/getFailItems", {}, function(data) {
        // 遍历数据展示到表格中去
        // 使用jQuery的方法来遍历JSON集合数据
        $.each(data, function() {
            // 把数据注入到表格的行中去
            var tr = document.createElement("tr");
            tr.align = "center";
            $("<td/>").html(this.name).appendTo(tr);
            $("<td/>").html(this.kind).appendTo(tr);
            $("<td/>").html(this.maxPrice).appendTo(tr);
            $("<td/>").html(this.remark).appendTo(tr);
            $("tbody").append(tr);
        })
    });
})

在上面的代码中,使用jQuery的get()方法向auction/getFailItems发送请求,该方法指定的回调函数将会负责迭代服务器端返回的JSON 数据,并将数据添加到页面上的<tbody>元素内。
查看流拍物品的HTML页面代码如下。
程序清单：codes\10\auction\WebContent\viewFail.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="js/viewFail.js"></script>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">所有流拍的物品</h3>
        </div>
        <div class="panel-body">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr align="center">
                        <th style="text-align: center;">物品名</th>
                        <th style="text-align: center;">物品种类</th>
                        <th style="text-align: center;">初始/最高价格</th>
                        <th style="text-align: center;">物品描述</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

从上面的页面代码可以看出,该页面只包含一个Bootstrap表单,在该表单内包含一个空的<tbody>元素,用于装载、显示从服务器端返回的流拍物品。如果系统中包含流拍物品,将可看到如图10.10所示的界面。