221-jquery增删手动输入数据

实现一下
减少商品

$(".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>