实现一下
减少商品
$(".minus").click(function(){
//获取原来数量并减去一个
count = $(this).prev().val()
count = parseInt(count) - 1
if (count <1){
count = 1
}
//给后台发送数据
goodsId = $(this).prev().attr("goodsId")
$.ajaxSettings.async = false
param = {"goodsId":goodsId, "count":count }
var errUpdate =true
$.post("/updateCart",param,function(data){
if(data.errno==5){
errUpdate=false
}else{
errUpdate=true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
//
if (errUpdate==false){
$(this).prev().val(count)
//更新小计
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(price) * count
//把小计设置到页面上
$(this).parents(".cart_list_td").children(".col07").text(totalPrice+"元")
//计算更新总价
CountTotalPrice()
}
})
然后
手动输入商品数量
实现一下
//当聚焦到标签的时候
var preCount
$(".num_show").focus(function(){
preCount=$(this).val()
})
//手动输入
$(".num_show").blur(function(){
//获取数据
count = $(this).val()
//数据校验
if(isNaN(count) || count<1 || count.trim().length==0)
count = preCount
$(this).val(count)
return
})
goodsId = $(this).attr("goodsId")
param={"goodsId":goodsId,"count":count}
errUpdate = true
$.ajaxSettings.async=false
//发送请求给后台
$.post("/updateCart",param,function(data){
if(data.errno==5){
errUpdate=false
}else{
errUpdate=true
alert(data.errmsg)
}
})
$.ajaxSettings.async=true
//根据返回结果来处理页面显示
if (errUpdate==false){
$(this).val(count)
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice=parseInt(count) * parseInt(price)
$(this).parents(".cart_list_td").children(".col07").text(totalPrice+"元")
//更新总价
CountTotalPrice()
}
}
然后
来下完整代码
//减少商品数量
$(".minus").click(function () {
//获取原来商品数量并减一
count = $(this).prev().val()
count = parseInt(count) - 1
if(count < 1){
count = 1
}
//给后台发送数据
goodsId = $(this).prev().attr("goodsId")
$.ajaxSettings.async = false
param = {"goodsId":goodsId,"count":count}
var errUpdate = true
$.post("/updateCart",param,function (data) {
if(data.errno == 5){
errUpdate = false
}else{
errUpdate = true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
if(errUpdate == false){
$(this).prev().val(count)
//更新小计
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(price) * count
//把小计设置到页面上
$(this).parents(".cart_list_td").children(".col07").text(totalPrice + "元")
//更细总价
CountTotalPrice()
}
})
//当聚焦到这个标签
var preCount
$(".num_show").focus(function () {
preCount = $(this).val()
})
//手动输入商品数量
$(".num_show").blur(function () {
//获取数据
count = $(this).val()
//数据校验
if(isNaN(count) || count < 1||count.trim().length == 0){
count = preCount
$(this).val(count)
return
}
//获取商品Id
goodsId = $(this).attr("goodsId")
count = parseInt(count)
param = {"goodsId":goodsId,"count":count}
errUpdate = true
$.ajaxSettings.async = false
//发请求给后台
$.post("/updateCart",param,function (data) {
if(data.errno == 5){
errUpdate = false
}else{
errUpdate = true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
//根据返回结果处理页面显示
if(errUpdate == false){
$(this).val(count)
//更新小计
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(count) * parseInt(price)
$(this).parents(".cart_list_td").children(".col07").text(totalPrice + "元")
//更新总价
CountTotalPrice()
}
})
其实呢
不管是增加,减少还是手动输入
都是一样的道理
我们来总结一下
1.先是针对控件的事件增加方法
比如click,,还有blur
2.然后$(this)或者prev,或者next
.val()进行取值,也就是取出输入框里面的值
3.如果是增加,那么就+1,
如果是减少,那么就-1
如果是输入那么就是本来的取出的val()的值
4.然后我们要拿到goodsId
goodsId就保存在输入框的自定义属性
所以我们.attr("goodsId")取出goodsId
5.然后我们自己来一个json
param={"goodsId":goodsId, "count":count}
把数据放到里面去
6.然后我们来一个errUpdate
看请求成功了没
7.然后是ajax请求
先要把ajax设为同步,async是异步的意思,所以把async设为false
$.ajaxSettings.async=false
然后post
$.post("/...",param,function(){
//判断是否成功
})
结束了把ajax改为异步
$.ajaxSettings.async=true
8.判断下成功了没,errUpdate为false就是没出错,就是成功了
if errUpdate==false {
}
9.更新下小计,更新下总价
price
totalPrice
CountTotalPrice()
接下来
实现一下
删除
$(".delete").click(function(){
//获取商品id
goodsId = $(this).parents(".cart_list_td").find(".num_show").attr("goodsId")
param={"goodsId":goodsId}
errUpdate=true
$.ajaxSettings.async=false
$.post("/deleteCart",param,function(data){
if(data.errno == 5){
errUpdate=false
}else{
errUpdate=true
alert(data.errmsg)
}
})
$.ajaxSettings.async=true
//删除一行
if (errUpdate==false){
$(this).parents(".cart_list_td").remove()
//计算一下
CountTotalPrice()
}
})
然后是go代码
func (this *CartController) DeleteCart(){
//获取数据
goodsId,err:= this.GetInt("goodsId")
resp := make(map[string]interface{})
defer this.ServeJSON()
defer this.Data["json"]=resp
//校验数据
if err!=nil {
resp["errno"]=1
resp["errmsg"]="数据传输错误"
return
}
//是否登录
userName := this.GetSession("userName")
if userName==nil{
resp["errno"]=2
resp["errmsg"]="用户未登录"
return
}
//处理数据
//从redis中删除数据
conn,err := redis.Dial("tcp","192.168.123.123:6379")
if err!=nil{
resp["errno"]=3
resp["errmsg"]="redis连接失败"
return
}
defer conn.Close()
conn.Do("hdel","cart_"+userName.(string),goodsId)
resp["errno"]=5
resp["errmsg"]="ok"
}
然后看下完整代码
<script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
<script>
CountTotalPrice()
//计算总价和总件数
function CountTotalPrice() {
var totalPrice = 0
var totalCount = 0
//通过选择器找到所有选中的input
$(".cart_list_td").find(":checked").each(function () {
price = $(this).parents(".cart_list_td").children(".col07").text()
//alert(parseInt(price))
totalPrice += parseInt(price)
totalCount += 1
})
//设置总价
$(".settlements").find("em").text(totalPrice.toFixed(2))
$(".settlements").find("b").text(totalCount)
}
//设置全选全不选
$("#select").change(function () {
//获取全选checkbox标签的选中状态
Is_checked = $(this).prop("checked") //attr
//把循环中所有的checkbox跟全选全不选设置一致
$(".cart_list_td").find(":checkbox").prop("checked",Is_checked)
//调用计算总价方法
CountTotalPrice()
})
//商品的checkbox选中状态对全选按钮以及总价的影响
$(".goodsCheck").change(function () {
//获取选中的复选框个数
checkedLength = $(".cart_list_td").find(":checked").length
//获取所有复选框个数
totalLenth = $(".cart_list_td").find(":checkbox").length
//校验
if(checkedLength == totalLenth){
$("#select").prop("checked","checked")
}else {
$("#select").prop("checked","")
}
//计算总价
CountTotalPrice()
})
//添加购物车商品
$(".add").click(function () {
//把商品数量在原来的基础上加一 不仅前端加,后台存储也要加一
count = $(this).next().val()
count = parseInt(count) + 1
goodsId = $(this).next().attr("goodsId")
//封装json数据
param = {"goodsId":goodsId,"count":count}
var errUpdate = true
//关闭异步
$.ajaxSettings.async = false
$.post("/updateCart",param,function (data) {
if(data.errno == 5){
//alert(data.errmsg)
errUpdate = false
}else {
alert(data.errmsg)
errUpdate = true
}
})
//回复ajax异步状态
$.ajaxSettings.async = true
if(errUpdate == false){
//设置到页面上
$(this).next().val(count)
//计算小结
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(price) * count
//把小计给设置到页面上
$(this).parents(".cart_list_td").children(".col07").text(totalPrice)
//计算总价
CountTotalPrice()
}
})
//减少商品数量
$(".minus").click(function () {
//获取原来商品数量并减一
count = $(this).prev().val()
count = parseInt(count) - 1
if(count < 1){
count = 1
}
//给后台发送数据
goodsId = $(this).prev().attr("goodsId")
$.ajaxSettings.async = false
param = {"goodsId":goodsId,"count":count}
var errUpdate = true
$.post("/updateCart",param,function (data) {
if(data.errno == 5){
errUpdate = false
}else{
errUpdate = true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
if(errUpdate == false){
$(this).prev().val(count)
//更新小计
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(price) * count
//把小计设置到页面上
$(this).parents(".cart_list_td").children(".col07").text(totalPrice + "元")
//更细总价
CountTotalPrice()
}
})
//当聚焦到这个标签
var preCount
$(".num_show").focus(function () {
preCount = $(this).val()
})
//手动输入商品数量
$(".num_show").blur(function () {
//获取数据
count = $(this).val()
//数据校验
if(isNaN(count) || count < 1||count.trim().length == 0){
count = preCount
$(this).val(count)
return
}
//获取商品Id
goodsId = $(this).attr("goodsId")
count = parseInt(count)
param = {"goodsId":goodsId,"count":count}
errUpdate = true
$.ajaxSettings.async = false
//发请求给后台
$.post("/updateCart",param,function (data) {
if(data.errno == 5){
errUpdate = false
}else{
errUpdate = true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
//根据返回结果处理页面显示
if(errUpdate == false){
$(this).val(count)
//更新小计
price = $(this).parents(".cart_list_td").children(".col05").text()
totalPrice = parseInt(count) * parseInt(price)
$(this).parents(".cart_list_td").children(".col07").text(totalPrice + "元")
//更新总价
CountTotalPrice()
}
})
//删除商品数量
$(".delete").click(function () {
//获取商品Id
goodsId=$(this).parents(".cart_list_td").find(".num_show").attr("goodsId")
//alert(goodsId)
param = {"goodsId":goodsId}
errUpdate = true
$.ajaxSettings.async = false
$.post("/deleteCart",param,function (data) {
if(data.errno == 5){
errUpdate = false
}else{
errUpdate = true
alert(data.errmsg)
}
})
$.ajaxSettings.async = true
if(errUpdate == false){
$(this).parents(".cart_list_td").remove()
//更新总价
CountTotalPrice()
}
})
</script>