beego购物车ajax异步刷新

数据库中添加购物车数据的时候,页面只是进行局部刷新。局部刷新我们一般用ajax来实现这个功能,那这里我们就用ajax发送请求。

请求

添加购物车,需要传递数据,我们一般是用post请求,函数名是$.post(),有三个参数,第一个参数是请求路径,第二个参数是传递的数据(json格式的数据),第三个参数是成功后所执行的函数

所以在发送请求之前,我们需要先确定请求路径,添加购物车数据需要登陆的状态下才能进行,所以我们设置请求路径为/user/addCart。

接着我们要去构造传递的数据,添加购物车,需要把商品id和对应的数量传递给后台,这里我们设计数据格式为{“skuid”:id,“count”:count}。

最后是我们的函数。代码如下:

  • 封装要传递的数据
    我们要传递的数据为商品的id,所以我们需要获取这个id,但是这时候你发现,我们页面里面没有显示商品id的地方。那这里需要我们手动在页面里面添加这个内容,有两种解决方法:
    第一种:隐藏域传值,这个方法我们前面用过,不做详细介绍。
    第二种:给某一个标签添加一个自定义属性,获取这个属性的值,这里我们给加入购物车按钮添加一个商品ID属性,代码如下:
    • 获取自定义属性的值,使用attr()方法。具体代码如下:
      skuid = $(’#add_cart’).attr(“skuid”) #原有属性prop 自定义属性 attr
      获取商品数量,直接获取相应标签值即可,代码如下:
      count = $(’.num_show’).val()
      封装成一个json格式的数据包,代码如下:
      params = {‘skuid’:skuid,‘goodsCount’:count}
  • 发送请求
    $.post(’/user/addCart’,params,function (data) {})

路由

ajax发送了请求之后,我们要在router.go中添加相对应的控制器和方法。

 beego.Router("/user/addCart",&controllers.CartController{},"post:HandleAddCart")

控制器

在路由指定了控制器和方法之后,我们就创建控制器并且实现HandleAddCart方法。

  • 获取数据
    skuid,err1 := this.GetInt(“skuid”)
    count,err2 := this.GetInt(“goodsCount”)

  • 校验数据
    校验数据传输是否正确
    //返回数据
    resp := make(map[string]interface{})
    defer this.ServeJSON()

    //数据校验
    if err1 != nil || err2 != nil{
    	resp["res"]=1
    	resp["errmsg"] = "获取数据信息错误"
    	this.Data["json"] = resp
    	return
    }
    

    注意,ajax传递过来的数据,我们回复的时候不再指定视图,而是回复给视图json格式的数据。那这里我们怎么给视图中传递json数据呢?
    首先定义一个map[string]interface类型,用来存储返回的数据,然后指定传递的数据代码为:
    this.Data[“json”] = resp
    接着调用传递数据函数:
    this.ServeJSON()
    不管能不能执行成功我们都要给ajax请求返回数据,所以这里我们可以直接defer调用函数的代码。

猜你喜欢

转载自blog.csdn.net/qq_30505673/article/details/83239041
今日推荐