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介绍目前我的理解就是这些,大家看看有什么不对的,提出来,愿与大家共同进步。
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo