Ajax

1.   ajax就是页面的异步刷新,即在整个页面不刷新的情况一下只刷新你要改变的地方。

先是页面:

<th><button id='<%= p.id %>' onclick = "get_cart_number(this.id)">加入购物车</button></th>

 页面调用js中的方法,即: onclick = "get_cart_number(this.id)"

2. 下面便是  在js中定义的 get_cart_number(x)方法

function get_cart_number(x)
{
        $.get("/get_cart_number?id=" + x +'.json' , function (data) {
            $('#cart_num').text(data)
        })
}

  这里便是用到了ajax,$.get 指定了你请求的方式,即get请求;接着的就是url,就是接口,如果是本地的话只要和路由内的对应上就行,自己随便起名字,但如果访问外界则按照给定的接口,其实配路由就是为了访问本地文件。后面的function(data)是为了接受你返回的数据。

 3.就是路由了

get "/get_cart_number" => 'homepage#get_cart_num'

    =>左是get请求与js内的get对应,右是指定了你的get请求的controller 内的指定方法,即指定homepage_controller内的get-cart_num方法,

4.controller喽

def get_cart_num
  add_cart
  get_cart_number
  respond_to do |format|
    format.json { render :json =>  @cart_num }
    format.js
  end
end

这个便是 homepage_controller内的get-cart_num方法这个方法调用了别的方法,即别的方法是对数据的一些处理就不细说了,由于需要放回的数据就是@cart_num所以就直接放回了,当然你可以返回一个数组,里面包含好多数据,这几行时ajax的固定写法:

respond_to do |format|
    format.json { render :json =>  @cart_num }
    format.js
  end

 respond_to 就是返回数据的意思,在此不深究,咱们要做的就是把自己要返回的数据替换了@cart_num就行了。

5.就是就放回的数据到哪了,其实就是上面第二点说的function(data),这个data参数就是你返回的@cart_num ,获取了需要的数据剩下的就是给了页面需要显示的位置:

$('#cart_num').text(data)

这句话就是用jquery把data数据赋值给了一个id=cart_num的一个标签。

    ajax介绍目前我的理解就是这些,大家看看有什么不对的,提出来,愿与大家共同进步。

    

相关推荐