10.6.7 查看自己的竞价记录

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

10.6.7 查看自己的竞价记录

如果当前用户已经登录,则还可以查看自己的所有竞价记录。用户单击”查看自己竞标“链接时,系统将会通过goPager()函数异步加载viewBid.html 页面,该页面只是一个简单的表格页面。该页面代码如下。
程序清单：codes\10\auction\WebContent\viewBid.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="js/viewBid.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">
                <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>

该页面所包含的JS将会异步获取用户所有的竞价记录,并将竞价记录动态显示在页面中。下面是该页面所包含的JS脚本代码。
程序清单：codes\10\auction\WebContent\js\viewBid.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
36
37
38
39
$(function() {
    // 
    $.get(
    // 请求URL
    "auction/getBidByUser",
    // 请求参数
    {},
    // 响应回到方法,data为响应对象
    function(data) {
        // 遍历数据展示到表格中去
        // 使用jQuery的方法来遍历JSON集合数据
        $.each(data, function() {
            // 如果响应对象由错误
            if (data.error) {
                // 在对话框中添加提示文本
                $("#tip").html(
                        "<span style='color:red;'>" + data.error + "</span>");
                // 显示对话框
                $('#myModal').modal('show');
                return;
            }
            // 如果收到正确的响应数据
            // 创建一个tr元素
            var tr = document.createElement("tr");
            // 设置对齐方式
            tr.align = "center";
            // 在<td>元素中写入html,并添加叫tr元素里面的末尾
            $("<td/>").html(this.item).appendTo(tr);
            $("<td/>").html(this.price).appendTo(tr);
            $("<td/>").html(long2Date(this.bidDate)).appendTo(tr);
            $("<td/>").html(this.user).appendTo(tr);
            // 在tbody元素里面的末尾追加tr元素
            $("tbody").append(tr);
        })
    });
    // 取消对话框中两个按钮上绑定的事件处理函数
    $("#sure").unbind("click");
    $("#cancelBn").unbind("click");
})

粗体字代码将会向auction/getBidByUser发送异步请求,该地址将以JSON格式返回所有的竞价记录。接下来jQuery将把所有竞价记录迭代并显示在页面上。
如果用户没有登录,则查看竞价记录时将被拦截器拦截,并弹出提示,告诉用户必须先登录系统。如果用户已经登录系统,则查看竞价记录时将看到如图10.20所示的界面。