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) { $.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所示的界面。
原文链接: 10.6.2 浏览所有流拍物品