220-beego结合jquery操作数据






beego结合jquery操作数据



我们来写一下js

先来写script标签
其实我们的script标签是可以写在html标签外面的

所以我们可以直接写在html标签外面

<html>
</html>

<script type="text/javascript" src="/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()
		
		//总价格
		totalPrice += parseInt(price)
		totalCount += 1
	})

	//设置总价
	$(".settlements").find("em").text(totalPrice.toFixed(2))
	$(".settlements").find("b").text(totalCount)
}

</script>




再来一次

首先我们把标签写出来
导入jquery

<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()
	
	//计算一下总价格和总件数
	totalPrice += parseInt(price)
	totalCount += 1
})

//设置一下总价和总件数
$(".settlements").find("em").text(totalPrice.toFixed(2))
$(".settlements").find("b").text(totalCount)

}

</script>




这里再解释一下吧
$(".abc001")
这里就是类选择器
如果class为abc001,就找到这个类选择器

然后是find是查找所有的元素
包括子元素,孙子元素,重孙子元素
所有的元素

each就是相当于遍历
每个都调用function方法

然后$(this)就是$(".cart_list_td")
当前这个对象

parents就是搜索所有的父元素

children就是搜索所有的子元素






然后我们来实现全选和全不选
$("#select").change(function(){
	checked=$(this).prop("checked")
	
	//把循环中所有的checkbox设置一致
	$(".cart_list_td").find(":checkbox").prop("checked",Is_checked)

	//调用计算总价的方法
	CountTotalPrice()
})


解释一下
prop就是获取checked的值

另外,如果我们有自定义的属性
那么我们就用attr






然后我们实现一下
checkbox选中状态对全选和总价的影响
$(".goodsCheck").change(function(){

	//获取选中的复选框的个数
	checkedLenth = $(".cart_list_td").find(":checked").length
	
	//获取全部复选框的个数
	totalLength = $(".cart_list_td").find(":checkbox").length

	//校验
	if (checkedLength == totalLength){
		$("#select").prop("checked","checked")
	}else{
		$("#select").prop("checked","")	
	}

	//计算一下
	CountTotalPrice()
})




再来一次
当我们选中一个商品,全选不勾选
当我们选中了所有的商品,全选会自动勾选
$(".goodsCheck").change(function(){
	//获取选中的复选框个数
	checkedLength = $(".cart_list_td").find(":checked").length

	//获取所有的复选框个数
	totalLength = $(".cart_list_td").find(":checkbox").length

	//校验一下
	if(checkedLength == totalLength){
		$("#select").prop("checked","checked")
	}else{
		$("#select").prop("checked","")
	}

	//计算总价
	CountTotalPrice()
})






然后实现一下
添加购物车商品
$("add").click(function(){
	//把商品的数量在原来的基础上加一
	count = $(this).next().val()
	count = parseInt(count) + 1

	//设置到页面上
	$(this).next().val(count)

	//计算一下小结
	$(this).parents(".cart_list_td").children(".col05").text()
	totalPrice = parseInt(price) * count

	//把小计给设置到页面上
	$(this).parents(".cart_list_td").chidlren(".col07").text(totalPrice)

	//计算一下总价
	CountTotalPrice()
})







再来一次
$(".add").click(function(){
	//把商品数量在原来的基础上加一
	count = $(this).next().val()
	count = parseInt(count) +1

	//设置到页面上
	$(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()
})







然后

$(".add").click(function(){
	//把商品数量在原来的基础上加一
	count = $(this).next().val()
	count = parseInt(count) +1

	goodsId = $(this).next().attr("goodsId")

	//封装json
	
	
	//设置到页面上
	$(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()
})






然后更新一下购物车数据
func (this *CartController) UpdateCart(){
	//获取数据
	goodsId,err1 := this.GetInt("goodsId")
	count,err2 := this.GetInt("count")
	resp := make(map[string]interface{})
	//获取用户名
	userName := this.GetSession("userName")

	if userName==nil{
		resp["errno"]=3
		resp["errmsg"]="未登录"
		this.Data["json"]=resp
		this.ServeJSON()
		return
	}

	//校验数据
	if err1!=nil || err2!=nil{
		resp["errno"]=1
		resp["errmsg"]="传输数据格式"
		this.Data["json"]=resp
		this.ServeJSON()
		return
	}
	
	//处理数据
	conn,err := redis.Dial("tcp","192.168.123.123:6479")
	if err!=nil{
		resp["errno"]=2
		resp["errmsg"]="redis链接错误"
		this.Data["json"]=resp
		this.ServeJSON()
		return
	}
	defer conn.Close()


	conn.Do("hset","cart_"+userName.(string),goodsId,count)

	//返回数据
	this.Data["json"]=resp
	this.ServeJSON()

}





然后
var errUpdate = true
$.post("/updateCart",param,function(data){
	if(data.errno==5){
	errUpdate=false
	}else{
	errUpdate=true
	}
})






好了,现在我们来看看完整代码
还是比较复杂的


        <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()
                }


            })
            
        </script>





//更新购物车数据
func(this*CartController)UpdateCart(){
	//获取数据
	goodsId,err1 := this.GetInt("goodsId")
	count,err2 :=this.GetInt("count")
	resp := make(map[string]interface{})
	userName:=this.GetSession("userName")
	if userName == nil{
		resp["errno"] = 3
		resp["errmsg"] = "用户未登录"
		this.Data["json"] = resp
		this.ServeJSON()
		return
	}


	//校验数据
	if err1 != nil || err2 != nil{
		resp["errno"] = 1
		resp["errmsg"] = "传输数据格式错误"
		this.Data["json"] = resp
		this.ServeJSON()
		return
	}
	//处理数据
	//更新redis中的数据
	conn,err :=redis.Dial("tcp","192.168.110.81:6379")
	if err != nil{
		resp["errno"] = 2
		resp["errmsg"] = "redis链接错误"
		this.Data["json"] = resp
		this.ServeJSON()
		return
	}

	defer conn.Close()
	//获取用户名

	conn.Do("hset","cart_"+userName.(string),goodsId,count)

	//返回数据
	resp["errno"] = 5
	resp["errmsg"] = "ok"
	this.Data["json"] = resp
	this.ServeJSON()
}
220-beego结合jquery操作数据

猜你喜欢
