简要姿势点
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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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
| ... | ... | @@ -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" |
| ... | ... |