rails ajax
2016-04-17 17:25
615 查看
第一步:在要添加ajax的视图对应的controller中添加新动作并在routes中定义该动作的路由下一步link_to等要用到定位到该contreller的action,在添加的新动作用写ajax中view和数据库的数据存储的方式或定义局部界面要展示的数据变量, 或者ajax的操作是注册用户而资源就是User则在原有的动作create中操作ajax中view和数据库的数据存储的方式或定义局部界面要展示的数据变量即可,并找到该动作对应的路由下一步link_to等要用到定向到该controller的action中。
第二步:在视图中定义link_to(params只传递一个id时用) 或者 button_to(params只传递一个id时用) 或者 form_for(submit按钮, params传递一个表单时用) 或者 form_tag(submit按钮, params传递一个表单时用) 加关键字remote: true。 界面中点击该链接后跳转到相应controller
第三步:界面中点击该链接按钮后跳转到相应controller的action,并按照action中的代码进行数据库和view中数据的交互操作, 或者拿到局部界面要展示的数据变量,进行完action动作后,action自动跳转到同名的js.erb文件(注:ajax的action中没有重定向redirect_to)(这个文件在controller对应的view文件夹中定义, 如果不是ajax则action动作执行完之后如果有重定向redirect_to则重定向到该页面, 如果没有则自动跳转到和该action同名的controller对应的view文件夹中的.html.erb视图中)
第四步:跳转到js.erb文件后执行该文件中的js代码, 进行跳转到局部试图页面进行刷新(在原视图中定义id即在原始图要局部刷新的部分的id)(如果semantic UI和bootstrap的弹出层,则原视图要刷新的id可以随便定义位置, js跳转时候要加入对应框架的代码)。(注意跳转到的局部视图页面名字以下划线开头_)
###如果只刷新局部视图的数据到这就为止了, 如果由弹出层再传回数据来更新数据库则往下看再做一个ajax操作
第五步:在controller中定义action并在action中定义数据操作, 并定义路由下一步link_to等要用到
第六步:在局部试图中定义link_to, button_to, form_for, form_tag等加关键字remote:true, 点击局部视图的按钮后, 跳转到action进行数据操作
第七步:数据操作完后action定向到和其同名的js.erb文件中执行js代码, 这里的js代码是对弹出层的隐藏hide()
###到此弹出层的两个ajax操作就执行完了
ajax渲染局部视图动作流程:视图中点击remote:true属性按钮, 跳转到对应controller的action中定义数据操作和要在局部视图展示的变量, 执行完后自动找到action同名.js.erb文件其中js代码跳转到要渲染的局部试图(只是渲染则局部视图应该是已经写好的, 只传action中重新定义的要展示变量)中进行局部视图的渲染(也就是更新要展示的数据)
ajax弹出层(渲染加保存数据)动作流程:试图中点击remote:true属性按钮, 跳转到对应controller中的第一个定义的action中进行数据操作和要在局部视图展示的变量, 执行完后自动找到第一个action同名的.js.erb文件其中js代码(由相应的弹出层操作)跳转到姚渲染的局部试图中进行局部试图渲染, 如果弹出层要接受表单数据则定义form_for. form_tag表单加remote:true关键字和要定向到controller中第二个action的路径, 弹出层中填好数据点确定按钮找到第二个action进行数据的保存操作,
执行完第二个action后, 跳转到第二个action的同名.js.erb文件中进行隐藏弹出层操作。
semantic UI弹出层两个ajax操作实例:
第一步:定义第一个action和路由
rooms_controller.rb中:
def add_subject_to_room
end
routes.rb中:
post '/rooms/add_subject_to_room/:id' => 'rooms#add_subject_to_room', :as => 'add_subject_to_room'
第二步:在要做ajax操作的页面加由关键字remote:true的link_to, button_to(manage_add_subject_to_room_path(room)即为上一步定义的第一个action路由), 和要渲染的位置的标签的id(如果是弹出层则随便在哪定义标签都可以)
index.html.erb中:
<%= button_to "update Subject", manage_add_subject_to_room_path(room), remote: true, class: "ui button" %>
<div id="placeholder"></div>(如果是弹出层这句随便在哪)
第三步:在第一个action中定义要展示的数据变量
rooms_controller.rb中:
def add_subject_to_room
@room = Room.find_by(number: params[:id])
@subjects = Subject.all
end
第四步:第一个action结束后自动跳转到同名.js.erb文件中,定义该js文件中要跳转到的局部视图(其中由调出弹出层的操作)
add_subject_to_room.js.erb中:
$("#placeholder").html('<%= j(render(partial: "manage/rooms/subject", locals: {room: @room})) %>');(这里的locals定义的room是第一个action要展示的变量@room的别名可以直接在局部试图中用, 防止多个action用一个局部视图名字冲突)
$("#placeholder-modal").modal("show", {detachable: false});(senmantic UI的弹出层调出的操作,id是在局部视图中定义的)
第五步:定义第二个action, 和对应的路由
rooms_controller.rb中:
def update_subject
end
routes.rb中:
post '/rooms/update_subject/:id' => 'rooms#update_subject', :as => 'update_subject'
第六步:定义局部视图的代码, 按照相应框架弹出层的布局来定义。定义跳转到第二个anction路径的form_tag并加关键字remote:true
_subject.html.erb中:
<div class="ui modal" id="placeholder-modal">
<div class="header">Choose room's subject</div>
<div class="content">
<%= form_tag "/manage/rooms/update_subject/#{@room.id}", remote: true, class: "nifty_form" do%>
<% @subjects.each do |subject| %>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="room[<%= subject.subject_type %>]" value="1" <%= 'checked' if Subject.find_by(subject_type: subject.subject_type).rooms_subjects.find_by(room_id: room.id) %> />
<label><%= subject.subject_type %></label>
</div>
</div>
<% end %>
<%= submit_tag "approve", class: "ui button" %>
<% end %>
</div>
</div>
</div>
第七步:第二个action中的数据保存操作
rooms_controller.rb中:
def update_subject
@types_params = []
@types = Subject.all.inject([]){|sum, a| sum << a.subject_type}
params[:room].each {|key, value| @types_params << key}
params[:room].each do |key, value|
if !Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id]).present?
Subject.find_by_subject_type(key).rooms_subjects.create(room_id: params[:id])
end
end
@types_difference = @types - @types_params
@types_difference.each do |key|
@types_difference_find = Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id])
if @types_difference_find.present?
@types_difference_find.delete
end
end
end
第八步: 第二个action执行完之后, 跳转到同名 .js.erb文件中在该文件中定义隐藏弹出框的操作
update_subject.js.erb中:
$('#placeholder-modal').modal("hide");(semantic UI的隐藏弹出层操作)
$('#placeholder-modal').remove(); (因为senmantic UI的弹出层由一个拷贝所以用remove()来全部移除, ****如果没有弹出层只是个局部视图要隐藏这个.js.erb文件中只加一个.hide()动作即可)
第二步:在视图中定义link_to(params只传递一个id时用) 或者 button_to(params只传递一个id时用) 或者 form_for(submit按钮, params传递一个表单时用) 或者 form_tag(submit按钮, params传递一个表单时用) 加关键字remote: true。 界面中点击该链接后跳转到相应controller
第三步:界面中点击该链接按钮后跳转到相应controller的action,并按照action中的代码进行数据库和view中数据的交互操作, 或者拿到局部界面要展示的数据变量,进行完action动作后,action自动跳转到同名的js.erb文件(注:ajax的action中没有重定向redirect_to)(这个文件在controller对应的view文件夹中定义, 如果不是ajax则action动作执行完之后如果有重定向redirect_to则重定向到该页面, 如果没有则自动跳转到和该action同名的controller对应的view文件夹中的.html.erb视图中)
第四步:跳转到js.erb文件后执行该文件中的js代码, 进行跳转到局部试图页面进行刷新(在原视图中定义id即在原始图要局部刷新的部分的id)(如果semantic UI和bootstrap的弹出层,则原视图要刷新的id可以随便定义位置, js跳转时候要加入对应框架的代码)。(注意跳转到的局部视图页面名字以下划线开头_)
###如果只刷新局部视图的数据到这就为止了, 如果由弹出层再传回数据来更新数据库则往下看再做一个ajax操作
第五步:在controller中定义action并在action中定义数据操作, 并定义路由下一步link_to等要用到
第六步:在局部试图中定义link_to, button_to, form_for, form_tag等加关键字remote:true, 点击局部视图的按钮后, 跳转到action进行数据操作
第七步:数据操作完后action定向到和其同名的js.erb文件中执行js代码, 这里的js代码是对弹出层的隐藏hide()
###到此弹出层的两个ajax操作就执行完了
ajax渲染局部视图动作流程:视图中点击remote:true属性按钮, 跳转到对应controller的action中定义数据操作和要在局部视图展示的变量, 执行完后自动找到action同名.js.erb文件其中js代码跳转到要渲染的局部试图(只是渲染则局部视图应该是已经写好的, 只传action中重新定义的要展示变量)中进行局部视图的渲染(也就是更新要展示的数据)
ajax弹出层(渲染加保存数据)动作流程:试图中点击remote:true属性按钮, 跳转到对应controller中的第一个定义的action中进行数据操作和要在局部视图展示的变量, 执行完后自动找到第一个action同名的.js.erb文件其中js代码(由相应的弹出层操作)跳转到姚渲染的局部试图中进行局部试图渲染, 如果弹出层要接受表单数据则定义form_for. form_tag表单加remote:true关键字和要定向到controller中第二个action的路径, 弹出层中填好数据点确定按钮找到第二个action进行数据的保存操作,
执行完第二个action后, 跳转到第二个action的同名.js.erb文件中进行隐藏弹出层操作。
semantic UI弹出层两个ajax操作实例:
第一步:定义第一个action和路由
rooms_controller.rb中:
def add_subject_to_room
end
routes.rb中:
post '/rooms/add_subject_to_room/:id' => 'rooms#add_subject_to_room', :as => 'add_subject_to_room'
第二步:在要做ajax操作的页面加由关键字remote:true的link_to, button_to(manage_add_subject_to_room_path(room)即为上一步定义的第一个action路由), 和要渲染的位置的标签的id(如果是弹出层则随便在哪定义标签都可以)
index.html.erb中:
<%= button_to "update Subject", manage_add_subject_to_room_path(room), remote: true, class: "ui button" %>
<div id="placeholder"></div>(如果是弹出层这句随便在哪)
第三步:在第一个action中定义要展示的数据变量
rooms_controller.rb中:
def add_subject_to_room
@room = Room.find_by(number: params[:id])
@subjects = Subject.all
end
第四步:第一个action结束后自动跳转到同名.js.erb文件中,定义该js文件中要跳转到的局部视图(其中由调出弹出层的操作)
add_subject_to_room.js.erb中:
$("#placeholder").html('<%= j(render(partial: "manage/rooms/subject", locals: {room: @room})) %>');(这里的locals定义的room是第一个action要展示的变量@room的别名可以直接在局部试图中用, 防止多个action用一个局部视图名字冲突)
$("#placeholder-modal").modal("show", {detachable: false});(senmantic UI的弹出层调出的操作,id是在局部视图中定义的)
第五步:定义第二个action, 和对应的路由
rooms_controller.rb中:
def update_subject
end
routes.rb中:
post '/rooms/update_subject/:id' => 'rooms#update_subject', :as => 'update_subject'
第六步:定义局部视图的代码, 按照相应框架弹出层的布局来定义。定义跳转到第二个anction路径的form_tag并加关键字remote:true
_subject.html.erb中:
<div class="ui modal" id="placeholder-modal">
<div class="header">Choose room's subject</div>
<div class="content">
<%= form_tag "/manage/rooms/update_subject/#{@room.id}", remote: true, class: "nifty_form" do%>
<% @subjects.each do |subject| %>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="room[<%= subject.subject_type %>]" value="1" <%= 'checked' if Subject.find_by(subject_type: subject.subject_type).rooms_subjects.find_by(room_id: room.id) %> />
<label><%= subject.subject_type %></label>
</div>
</div>
<% end %>
<%= submit_tag "approve", class: "ui button" %>
<% end %>
</div>
</div>
</div>
第七步:第二个action中的数据保存操作
rooms_controller.rb中:
def update_subject
@types_params = []
@types = Subject.all.inject([]){|sum, a| sum << a.subject_type}
params[:room].each {|key, value| @types_params << key}
params[:room].each do |key, value|
if !Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id]).present?
Subject.find_by_subject_type(key).rooms_subjects.create(room_id: params[:id])
end
end
@types_difference = @types - @types_params
@types_difference.each do |key|
@types_difference_find = Subject.find_by_subject_type(key).rooms_subjects.find_by_room_id(params[:id])
if @types_difference_find.present?
@types_difference_find.delete
end
end
end
第八步: 第二个action执行完之后, 跳转到同名 .js.erb文件中在该文件中定义隐藏弹出框的操作
update_subject.js.erb中:
$('#placeholder-modal').modal("hide");(semantic UI的隐藏弹出层操作)
$('#placeholder-modal').remove(); (因为senmantic UI的弹出层由一个拷贝所以用remove()来全部移除, ****如果没有弹出层只是个局部视图要隐藏这个.js.erb文件中只加一个.hide()动作即可)
相关文章推荐
- MyBaits传递多个参数
- 【杭电oj】1789 - Doing Homework again(贪心,并查集)
- 【原创】区块链技术主流开源项目 - Major Open Source Projects of Blockchain Technologies
- XML Parser Errors See Details for more Information XML Parser Error on line 1: Document root ele
- “娇娇”这把火, 烧得整个机器人圈脸疼
- main()函数的参数
- USACO-Section 4.2 Drainage Ditches (最大流[Ford-Fulkerson])
- No user specified nor available for SSH client
- idea报Error Compilation failed
- CONTAINER类之心得体会
- *[Lintcode]Trailing Zeros
- LightOJ 1236 Pairs Forming LCM【整数分解】
- LightOJ 1236 Pairs Forming LCM【整数分解】
- Jersey(1.19.1) - Client API, Uniform Interface Constraint
- 401 Unauthorized: ERROR Failed to connect to newly launched supervisor. Agent will exit
- POJ3250 Bad Hair Day(单调栈)
- 对话吴恩达(Andrew Ng):超级大咖深度解析人工智能 以及如何成为已经数据挖掘工程师
- wait()、notify()、await()、signal()的使用
- 【LeetCode】70. Climbing Stairs
- [LeetCode]70. Climbing Stairs