10.6.6 查看竞得物品

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

10.6.6 查看竞得物品

当用户单击页面上方的”查看竞得的物品“链接时,如果用户还未登录系统,将弹出提示信息,告诉用户应先登录系统;如果用户已经登录了本系统,系统通过goPager()函数加载viewSucc.html页面。该页面只是一个简单的表格页面,用于显示用户所有赢取的物品。
该页面代码如下。
程序清单：codes\10\auction\WebContent\viewSucc.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 该js会向服务器请求数据,并更新表格 -->
<script src="js/viewSucc.js"></script>
<div class="container">
    <!-- 面板 -->
    <div class="panel panel-primary">
        <!-- 面板头 -->
        <div class="panel-heading">
            <h3 class="panel-title">您赢取的所有物品</h3>
        </div>
        <!-- 面板主体 -->
        <div class="panel-body">
            <!-- 表格,将会通过js更新 -->
            <table class="table table-bordered">
                <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>
                <!-- 由jQuery根据响应数据生成表格内容 -->
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

该表格只包含一个表格头,表格的内容将会由jQuery异步获取并加载。该页面所包含的viewSucc.js脚本的代码如下。
程序清单：codes\10\auction\WebContent\js\viewSucc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
$(function() {
    // 发送get请求
    $.get(
    // 请求的URL
    "auction/getItemByWiner",
    // 请求参数
    {},
    // 响应回调函数,data的到的响应
    function(data) {
        // 遍历数据展示到表格中去
        // 使用jQuery的方法来遍历JSON集合数据
        $.each(data, function() {
            // 如果响应错误
            if (data.error) {
                $("#tip").html(
                        "<span style='color:red;'>" + data.error + "</span>");
                $('#myModal').modal('show');
                return;
            }
            // 把数据注入到表格的行中去
            var tr = document.createElement("tr");
            tr.align = "center";
            // 创建<td>元素,然后设置其内容,然后添加到tr元素内部的尾部中.
            $("<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内的尾部添加tr标签
            $("tbody").append(tr);
        })
    });
    // 取消对话框中两个按钮上绑定的事件处理函数
    $("#sure").unbind("click");
    $("#cancelBn").unbind("click");
})

从上述代码可以看出,该页面向auction/getItemByWiner发送请求,该地址将会以JSON格式返回当前用户所竞得的全部物品。接下来jQuery会迭代并显示从服务器端返回的全部物品信息。
如果当前用户已经赢取了某些物品,则当用户单击”查看竞得物品”链接时,将看到如图10.19所示的界面。