购物车页面
<script type="text/javascript" src="${pageContext.request.contextPath}/js/angularjs.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/fuxuan.js"></script>
<script type="text/javascript">
var app=angular.module("myApp", []);
app.controller("myController",function($scope,$http){
$http.post("${pageContext.request.contextPath}/goods/select")
.success(function(obj){
$scope.shang=obj;
});
$scope.jian=function(index){
var id= $scope.shang[index].id;
$http.post("${pageContext.request.contextPath}/goods/jian?id="+id)
.success(function(da){
--$scope.shang[index].account;
});
};
$scope.jia=function(index){
var id= $scope.shang[index].id;
$http.post("${pageContext.request.contextPath}/goods/jia?id="+id)
.success(function(da){
++$scope.shang[index].account;
});
};
//定义一个监听事件
$scope.$watch("shang",function(newValue,oldValue){
angular.forEach($scope.shang,function(obj,index){
//判定当前对象的数量是否小于1
if(obj.account<1)
{
//判定是否删除
if(confirm("是否确认删除?"))
{
//请求删除 的方法
$http.post("${pageContext.request.contextPath}/goods/delete?id="+obj.id)
.success(function(da){
$scope.shang.splice(index,1);
alert("删除成功!");
location.reload();
});
}
else
{
//请求添加数量的方法
$http.post("${pageContext.request.contextPath}/goods/jia?id="+obj.id)
.success(function(da){
$scope.shang[index].account=oldValue[index].account;
});
}
}
});
},true);
//定义输入框绑定事件
$scope.change=function(index){
//获取当前行的ID
var id= $scope.shang[index].id;
//获取当前行的数量
var count=$scope.shang[index].account;
//请求
$http.post("${pageContext.request.contextPath}/goods/updateCount?id="+id+"&count="+count)
.success(function(da){
location.reload();
});
};
//定义删除方法
$scope.delete1=function(index){
var id= $scope.shang[index].id;
if(confirm("确定要删除吗?"))
{
//请求删除的方法
$http.post("${pageContext.request.contextPath}/goods/delete?id="+id)
.success(function(da){
alert("删除成功!");
location.reload();
});
}
else
{
}
};
});
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myController">
<div class="page-header">
<h1>购物车页面</h1>
</div>
<h4>欢迎${user.username}</h4>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<td><input type="checkbox" ng-model="all"></td>
<td>商品序号</td>
<td>商品名称</td>
<td>商品价格</td>
<td>商品数量</td>
<td>商品小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in shang">
<td><input type="checkbox" value="{{y.id}}" ng-checked="all" class="cheid"></td>
<td>{{y.id}}</td>
<td>{{y.goodsname}}</td>
<td>{{y.price | number:2}}</td>
<td>
<button class=" btn btn-success" ng-click="jian($index)" style="width: 30">-</button>
<input type="text" ng-model="y.account" value="{{y.account}}" ng-blur="change($index)" style="width: 30">
<button class=" btn btn-success" ng-click="jia($index)" style="width: 30">+</button>
</td>
<td>{{y.price*y.account}}</td>
<td><button class="btn btn-danger" ng-click="delete1($index)">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<button class="btn btn-info" id="buuuid">添加到订单表</button>
<a class="btn btn-danger" href="${pageContext.request.contextPath}/order/select">查看订单表</a>
</tr>
</tfoot>
</table>
</div>
</body>
复选js
$(function(){
//定义普通按钮点击事件
$("#buuuid").click(function(){
//定义数组
var arr=[];
//定义获取所有被选中的复选框
$("input:checked:gt(0)").each(function(obj,index){
arr.push($(this).val());
});
//判定长度
if(arr.length<0)
{
alert("请至少选中一条!");
return false;
}
else
{
alert(121);
$.post("http://127.0.0.1:8080/lianxiti/order/add",{"goods_ids":arr.join(",")},function(da){
//判定
if(da=="ok")
{
alert("添加成功!");
location.reload();
}
},"json");
}
});
});
订单页面
<body>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<td>订单号</td>
<td>用户</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品小计</td>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="li">
<tr>
<td>${li.id}</td>
<td>${li.user_id.username}</td>
<td>${li.goods_id.goodsname}</td>
<td>${li.goods_id.account}</td>
<td>${li.goods_id.price*li.goods_id.account}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>