rails ajax 执行remote js

简要姿势点

1.Controller::Action 写

respond_to do |format|

format.js

format.html

format.xls

end

Rails会对应去render 

controller_name/action_name.js.erb

controller_name/action_name.html.erb

controller_name/action_name.xls.eku

 

2.在xxx.js.erb  render  yyy.html.erb

$("#captcha_layer").html("<%=escape_javascript(render file: 'home/captcha_pop_up.html.erb')%>");

 

3.jQuery Ajax dataType: 'script'

ref: http://www.w3cschool.cn/ajax_ajax.html

          $.ajax({

             url: '/get_captcha_pop_up',

             data: {form_id : 'user_design_form', is_on_submit : true},

             dataType: 'script',

             type: 'get'

          });

 

贴一下代码

 app/assets/javascripts/main.js

 Diff comments   View file @a31a719

...	...	@@ -1225,6 +1225,13 @@ $(function(){
1225	1225	// alert('请选择分类')
1226	1226	// return false;
1227	1227	// };
	1228	+ $.ajax({
	1229	+ url: '/get_captcha_pop_up',
	1230	+ data: {form_id : 'famous_ask_form'},
	1231	+ dataType: 'script',
	1232	+ type: 'get'
	1233	+ });
	1234	+ return false;
1228	1235	})
1229	1236	}($));
1230	1237	});
1231	1238	\ No newline at end of file
...	...

app/assets/stylesheets/home_manage.css

 Diff comments   View file @a31a719

...	...	@@ -18,4 +18,35 @@
18	18	.colorbox_ul {
19	19	width: 528px;
20	20	height: 35px;
21		-}
22	21	\ No newline at end of file
	22	+}
	23	+
	24	+#layer {
	25	+ position: fixed;
	26	+ width: 100%;
	27	+ height: 100%;
	28	+ left: 0;
	29	+ top: 0;
	30	+ background: #000;
	31	+ opacity: 0.5;
	32	+ filter: alpha(opacity=50);
	33	+ z-index: 10;
	34	+}
	35	+.introNew_pop{ width:400px; border-radius:6px; background:#fff; position:fixed; height:310px; top:50%; left:50%; margin:-154px 0 0 -140px; z-index:12; display:none; background-image:url(/assets/captcha_layer/bg.png)}
	36	+.introNew_pop_con{ margin:0px; float:left; display:inline-block; width:400px; }
	37	+
	38	+.introNew_pop_con h2{ margin-left:30px; line-height:10px;}
	39	+.news_info{ margin-left:40px; margin-top:2px;width:100%; text-align:left; float:left; padding:2px 0; color:#898989; }
	40	+.news_info input{border: 1px solid; border-color: #CCC #EEE #EEE #CCC;
	41	+color: #000; background: #fff;
	42	+width: 304px; height:40px;}
	43	+.news_info em{ font-style:normal; padding-right:15px; color:#b2b2b2; }
	44	+.news_info em.red{ color:#f47389; }
	45	+
	46	+.newsInfo_con{ margin-left:40px;padding-bottom:10px; width:100%; }
	47	+.newsInfo_scroll{ width:100%; height:310px; overflow:auto; margin:40px 0 0 0; display:inline-block; }
	48	+.newsInfo_scroll p{ text-align:left; line-height:20px; padding:10px 0; width:98%; font-size:14px; line-height:22px; color:#6f6f6f; }
	49	+.newspop_close{ width:70px; height:60px; display:inline-block; background:#f47389; line-height:60px; color:#fff; font-size:30px; text-align:center; margin:40px 0 0 0; }
	50	+.button{ margin-left:40px;padding-bottom:30px; width:100%; }
	51	+.goback{ color:#0c90b1; font-size:12px; line-height:35px;}
	52	+.closeicon{margin-top:17px; height:22px;width:22px;cursor:pointer; margin-left:362px; }
	53	+.textinput{font-size:12px; margin-top:10px; line-height:29px;}
23	54	\ No newline at end of file
...	...

app/controllers/designs_controller.rb

 Diff comments   View file @a31a719

...	...	@@ -148,6 +148,10 @@ class DesignsController < ApplicationController
148	148	flash[:design_errors] = []
149	149	flag = true
150	150	@design = current_user.designs.build(params[:design])
	151	+ unless simple_captcha_valid?
	152	+ flash[:design_errors] << "验证码错误"
	153	+ flag = false
	154	+ end
151	155	if params[:story_id].present?
152	156	@design.story_id = params[:story_id]
153	157	@design.baicheng_active = true
...	...

app/controllers/dialog_celebrity/celebrity_questions_controller.rb

 Diff comments   View file @a31a719

...	...	@@ -15,6 +15,10 @@ class DialogCelebrity::CelebrityQuestionsController < ApplicationController
15	15
16	16	def create
17	17	question = CelebrityQuestion.new params[:celebrity_question]
	18	+ unless simple_captcha_valid?
	19	+ flash[:notice] = "验证码错误"
	20	+ redirect_to new_dialog_celebrity_celebrity_question_path and return
	21	+ end
18	22	question.keyword = ""
19	23	unless question.save
20	24	flash[:notice] = "描述文字不少于6个字"
...	...

app/controllers/home_controller.rb

 Diff comments   View file @a31a719

...	...	@@ -227,4 +227,12 @@ class HomeController < ApplicationController
227	227	def get_user_sign_status
228	228	render :json => { code: current_user.present? ? 1 : 0, content: render_to_string(partial: "layouts/navbar-fixed-top") }
229	229	end
	230	+
	231	+ def get_captcha_pop_up
	232	+ @form_id = params[:form_id]
	233	+ @is_on_submit = params[:is_on_submit]
	234	+ respond_to do |format|
	235	+ format.js
	236	+ end
	237	+ end
230	238	end
231	239	\ No newline at end of file
...	...

app/views/designs/new.html.erb

 Diff comments   View file @a31a719

...	...	@@ -65,7 +65,17 @@
65	65	alert(falg)
66	66	return false
67	67	}else{
68		- return true
	68	+ if ('true'==$('#user_design_form_commit_flag').val() ) {
	69	+ return true;
	70	+ }else{
	71	+ $.ajax({
	72	+ url: '/get_captcha_pop_up',
	73	+ data: {form_id : 'user_design_form', is_on_submit : true},
	74	+ dataType: 'script',
	75	+ type: 'get'
	76	+ });
	77	+ return false
	78	+ };
69	79	}
70	80
71	81	})
...	...	@@ -110,7 +120,9 @@
110	120
111	121	<div class="tab-content upload_content">
112	122	<div class="tab-pane active" id="upload_tab1">
113		- <%= form_for([current_user, @design], html: {:class=>"form-horizontal index_main noborder nopadding nomargin js-commit"}) do |f| %>
	123	+ <%= form_for([current_user, @design], html: {:id=>'user_design_form', :class=>"form-horizontal index_main noborder nopadding nomargin js-commit"}) do |f| %>
	124	+ <input id="user_design_form_captcha" name="captcha" type="hidden">
	125	+ <input id="user_design_form_commit_flag" value="false" type="hidden">
114	126	<%= hidden_field_tag "story_id", params[:story_id] %>
115	127	<fieldset class="text-center">
116	128	<label class="radio inline">
...	...

app/views/dialog_celebrity/celebrity_questions/new.html.erb

 Diff comments   View file @a31a719

...	...	@@ -167,7 +167,8 @@
167	167
168	168	<div class="tab-content famous_ask_content">
169	169	<div class="tab-pane active" id="famous_tab1">
170		- <form action="<%=dialog_celebrity_celebrity_questions_path%>" method="post" class="famous_ask_form nomargin pt15 pb25">
	170	+ <form id="famous_ask_form" action="<%=dialog_celebrity_celebrity_questions_path%>" method="post" class="famous_ask_form nomargin pt15 pb25">
	171	+ <input id="famous_ask_form_captcha" name="captcha" type="hidden">
171	172	<% if current_user.present? -%>
172	173	<input type="hidden" name="celebrity_question[user_id]" value="<%= current_user.id %>">
173	174	<%else -%>
...	...

app/views/home/captcha_pop_up.html.erb

 Diff comments   View file @a31a719

...	...	@@ -0,0 +1,20 @@
	1	+<div class="introNew_pop" style="display: block;">
	2	+ <div class="introNew_pop_con">
	3	+ <div class="closeicon"><a href="#"></a></div>
	4	+ <h2></h2>
	5	+ <div class="news_info">
	6	+ <br />
	7	+ <span class="textinput">按下图中的字符填写，不区分大小写。</span>
	8	+ </div>
	9	+ <div class="newsInfo_con">
	10	+ <%= show_simple_captcha %>
	11	+ <span id="lab_captcha" class="label label-important hide vadil">请输入验证码</span>
	12	+ </div>
	13	+ <div class="button">
	14	+ <a href="#">
	15	+ <span style="margin-left:9px;"><img id="quit_captcha_layer" src="<%= asset_path "captcha_layer/button2.png" %>" /></span>
	16	+ <span style="float:left; "><img id="submit_captcha_layer" src="<%= asset_path "captcha_layer/button1.png" %>" /></span>
	17	+ </a>
	18	+ </div>
	19	+ </div>
	20	+</div>
0	21	\ No newline at end of file
...	...

app/views/home/get_captcha_pop_up.js.erb

 Diff comments   View file @a31a719

...	...	@@ -0,0 +1,25 @@
	1	+ $("#captcha_layer").html("<%=escape_javascript(render file: 'home/captcha_pop_up.html.erb')%>");
	2	+ $("#layer").show();
	3	+ $("#captcha_layer").show();
	4	+
	5	+ $(".closeicon").click(function(){
	6	+ $("#layer").hide();
	7	+ $("#captcha_layer").hide();
	8	+ });
	9	+ $("#quit_captcha_layer").click(function(){
	10	+ $("#layer").hide();
	11	+ $("#captcha_layer").hide();
	12	+ });
	13	+ $("#submit_captcha_layer").click(function(){
	14	+ if ($('#captcha').val() == "") {
	15	+ $("#lab_captcha").addClass('label-important').show().text('请输入验证码');
	16	+ } else {
	17	+ $("#layer").hide();
	18	+ $("#captcha_layer").hide();
	19	+ $('#<%= @form_id %>_captcha').val( $('#captcha').val() );
	20	+ <% if @is_on_submit %>
	21	+ $('#<%= @form_id %>_commit_flag').val( 'true' );
	22	+ <% end %>
	23	+ $('#<%= @form_id %>').submit();
	24	+ }
	25	+ });
0	26	\ No newline at end of file
...	...

app/views/layouts/home_manage.html.erb

 Diff comments   View file @a31a719

...	...	@@ -38,6 +38,8 @@
38	38	<%= yield :body_head %>
39	39	<!-- <%#= render "layouts/navbar-fixed-top" %> -->
40	40
	41	+ <div id="layer" style="display: none;"></div>
	42	+ <div id="captcha_layer" style="display: none;"></div>
41	43	<div class="navbar nomargin" id="navbar-warp">
42	44	<div class="container">
43	45	<div style="display:none">
...	...	@@ -356,7 +358,6 @@
356	358
357	359	<%#= render "layouts/login" %>
358	360	<script type="text/javascript">
359		-
360	361	jQuery(function($){
361	362	var form = $('form.float_login')
362	363	form.hover(function(){
...	...

config/routes.rb

 Diff comments   View file @a31a719

...	...	@@ -77,6 +77,7 @@ Icolor::Application.routes.draw do
77	77	get "home/home_overall" => "home#home_overall"
78	78	get "home/image_show_loading" => "home#image_show_loading"
79	79	get "/get_user_sign_status" => "home#get_user_sign_status"
	80	+ get "/get_captcha_pop_up" => "home#get_captcha_pop_up"
80	81
81	82	root :to => 'home#index'
82	83	get "home/design_show"
...	...