10.6.9 参与竞价
如果单击图10.22所示的物品的链接,将触发goPage()函数加载addBid.html,并将当前物品赋值给curBidItem变量,这样程序可以在竞拍页面上回显当前竞拍的物品。
addBid.html页面主要用于显示当前竞拍物品的详情,并提供一个表单控件供用户输入竞价的价格。下面是addBid.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
| <script src="js/addBid.js"></script>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">参与竞价</h4>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">物品名：</label>
<div class="col-sm-4">
<p class="form-control-static" id="nameSt"></p>
</div>
<label class="col-sm-2 control-label">物品描述：</label>
<div class="col-sm-4">
<p class="form-control-static" id="descSt"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物品所有者：</label>
<div class="col-sm-4">
<p class="form-control-static" id="ownerSt"></p>
</div>
<label class="col-sm-2 control-label">物品种类：</label>
<div class="col-sm-4">
<p class="form-control-static" id="kindSt"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物品起拍价：</label>
<div class="col-sm-4">
<p class="form-control-static" id="initPriceSt"></p>
</div>
<label class="col-sm-2 control-label">物品最高价：</label>
<div class="col-sm-4">
<p class="form-control-static" id="maxPriceSt"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">起卖时间：</label>
<div class="col-sm-4">
<p class="form-control-static" id="startSt"></p>
</div>
<label class="col-sm-2 control-label">结束时间：</label>
<div class="col-sm-4">
<p class="form-control-static" id="endSt"></p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">物品备注：</label>
<div class="col-sm-10">
<p class="form-control-static" id="remarkSt"></p>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<p class="well">如果你有兴趣参与该物品竞价，请输入价格后提交，<br>
请注意，你的价格应该大于物品的当前最高价</p>
</div>
</div>
<div class="form-group">
<label for='bidPrice' class="col-sm-2 control-label">竞拍价：</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="bidPrice" name="bidPrice" min="0" required>
<input type="hidden" id="itemId" name="itemId">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="addItem" class="btn btn-success">竞价</button>
<button id="cancel" role="button" class="btn btn-danger">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
|
该页面使用静态表单控件回显当前竞拍物品的信息,此外页面还提供了一个表单控件让用户输入竞拍价格,和一个隐藏域记录当前物品ID。而该页面加载的JS脚本将会读取curBidItem变量的信息,并将当前竞拍物品的信息回显在当前页面中。
单击某个物品名,将看到如图10.23所示的界面。
在图10.23所示的界面的下方,用户可以输入竞拍价格参与竞拍。如果单击”竞价”按钮,将会触发表单提交,但jQuery会接管表单的提交行为,改为使用异步方式提交表单。该页面的JS脚本代码如下。
程序清单：codes\10\auction\WebContent\js\addBid.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| $(function () {
// 发送请求
$.get("auction/getAllKind", {}, function (data) {
// 遍历数据展示到下拉列表中去
// 使用jQuery的方法来遍历JSON集合数据
$.each(data, function () {
// 把数据注入到下拉列表中
$("<option/>").html(this.kindName).val(this.id)
.appendTo("#kindSelect");
})
});
// 监听下拉列表
$("#kindSelect").change(function () {
// 如果下拉项是默认
if ($("#kindSelect").val() == 0) {
return;
}
// 获取当前选中的商品类别去加载下面拍卖的商品
$.post(
// 请求URL
"auction/getItemsByKind",
// 请求数据
{ kindId: this.value },
// 响应处理回到函数
function (data) {
// 先清空表格之前的数据
$("tbody").empty();
//如果响应不对
if (data == null || data.length < 1) {
// 设置对话框中的提示信息
$("#tip").html("<span style='color:red;'>该种类下暂时没有竞拍物品,请重新选择</span>");
// 显示对话框
$('#myModal').modal('show');
}
// 遍历数据展示到表格中去
// 使用jQuery的方法来遍历JSON集合数据
else {
// 遍历JSON
$.each(data, function () {
// 把数据注入到表格的行中去
var tr = document.createElement("tr");
tr.align = "center";
$("<td/>").html("<a href='#' onclick='goPage(\"addBid.html\");"
+ "curBidItem=" + JSON.stringify(this)
+ ";'>" + this.name + "</a>").appendTo(tr);
$("<td/>").html(long2Date(this.addTime)).appendTo(tr);
$("<td/>").html(long2Date(this.endTime)).appendTo(tr);
$("<td/>").html(this.maxPrice).appendTo(tr);
$("<td/>").html(this.owner).appendTo(tr);
$("tbody").append(tr);
})
}
});
})
// 取消对话框中两个按钮上绑定的事件处理函数
$("#sure").unbind("click");
$("#cancelBn").unbind("click");
});
|
该JS脚本的第一段代码读取curBidItem变量的数据,并将这些数据加载在页面中显示。