`

ruby(rails)+jquery.ajax 登录和注册

阅读更多

写一个简单ajax登录和注册方法,缩简写法

以注册为例!!!请看注意点

四步:1 ruby 表单提交,2 controller ajax验证方法,3 jquery ajax 验证,4 ruby 表单提交

 

 

1 ruby 表单提交

 

假设有以下ruby 表单 注册提交

 

 

<%form_for :client_user,:url => {:controller=>'new',:action => 'regirest' },:html=>{:id=>'regirest_up'} do |f|%>	
	<div id="regirest_pop" class="login_pop" style="display: none;">
	    <table cellspacing="0" cellpadding="0" border="0">
	        <tbody>
	            <tr>
	                <td width="60" align="right">
	                    邮箱:
	                </td>
	                <td>
				<%=f.text_field :email,:class=>"txt txt_mail error_u_mail",:id=>"u_mail"%>
	                </td>
	            </tr>
	            <tr>
	                <td width="60" align="right">
	                    昵称:
	                </td>
	                <td>
	                    <%=f.text_field :nickname,:class=>"txt txt_name error_u_username",:id=>"u_username"%>
					</td>
	            </tr>
	            <tr>
	                <td width="60" align="right">
	                    密码:
	                </td>
	                <td>
					    <%=f.password_field :password,:class=>"txt txt_name error_u_password",:id=>"u_password"%>
					</td>
	            </tr>
	            <tr>
	            <td width="60" align="right">确认密码:</td>
	                <td>
				 <input id="u_pwd" class="txt txt_pwd2 error_u_password2" type="password" name="u_password2"></td>
					</td>
	                </td>
	            </tr>
	            <tr>
	                <td>
	                </td>
	                <td>
	                    <input type="checkbox"  id="t_auto" name="t_auto" value="1">
				<a href="#">同意淘价相关协议条款</a>
	                </td>
	            </tr>
	            <tr>
	                <td>
	                    &nbsp;
	                </td>
	                <td>
				<%=button_to_function '注册',:class=>"btn_registered",:id=>"miniregirest_submit"%>
	                </td>
	            </tr>
	        </tbody>
	    </table>
	    <a class="btn_close" onclick="return false" href="javascript:;" id='regirest_close'>关闭</a>
	</div>
<%end%>

 

 

注意:表单ID 为了提单表时,所需要。

注册按钮写法: 当为button,或是submit 时,html 页面显示都为submint型按钮,在点击后,表单一定会提交,所要写成  button_to_function 或是 html 中的button,这样可以让表单不提交。当 ajax 不提交表单时。

二 controller 方法

 

 

 

 #ajax 注册email验证 
  def ajax_valid_email

      if params[:email]

          client_user=ClientUser.find(:all,:conditions=>["email= ?",params[:email]])

          if client_user.size==0

              render :text=>"true"
              
          else

              render :text=>"false"
             #render:text=>"false"  and return false   为了此句后方法不执行
          end

      else

          render :text=>"false"
      end

  end

 注意:ruby传给页面参数只有  render 或  redirect_to  ,在IE,使用xml传递时,与其它的浏览器xml不同。

 

 

3   jquery ajax验证 

 

 

	$('#miniregirest_submit').click(function(){
		if($("#u_mail").val().length<3){
			
			alert("邮箱格式不正确");
			return false;
		}
		
		if($j("#u_username").val()==""){
			
			alert("昵称不为空");
			return false;
		}
		
		if($("#u_password").val()==""){
			
			alert("密码不能为空");
			return false;
		}
		if($("#u_password").val()!=$("#u_pwd").val()){
			
			alert("密码不一至");
			return false;
		}
		
		$.ajax({
			type: 'POST',     //请求方式
			url: "/new/ajax_valid_email",   //验证方法地址,这里是 验证email是否重用
			data: {email: $("#u_mail").val()},    //传给url方法参数,格式化: 参数名:参数值,参数名
                         // 参数名与ruby 后台方法params[:email] 对应。                                                      
			success: function(data){         //返回值结果是判断
				if(data=="true"){
					   //返回true ,表单提交
					$("#regirest_up").submit();
					alert("同意协议后注册");
				
				
				}else{
					
			        alert("用户名己存在");
					return false;    //防止表单提交,同时还可以产生页面不刷新的效果。

				}
			}
		});
		
		
   });
 

 

4 ruby 表单提交

 

  def regirest

    client_user=ClientUser.new(params[:client_user])
   if  client_user.save
      flash[:notice]="注册成功"
   else
      flash[:notice]="注册失败"
   end
    redirect_to :controller=>'w',:action=>'index'
 end
 

登录也是两只样的方法,自己试试吧。正规写法并不是这样的,我这里是自己缩简后的写哦。

希望能给和我一样的初学者带来帮助

 

 

 

分享到:
评论

相关推荐

    Apress,.Beginning.Google.Maps.Applications.with.Rails.and.Ajax.

    《初识Google Maps应用:基于Rails和Ajax》是一本由Apress出版的技术书籍,专注于讲解如何使用Ruby on Rails框架和Ajax技术构建与Google Maps集成的应用程序。这本书详细介绍了如何利用Google Maps API,结合Web开发...

    前端项目-jquery.turbolinks.zip

    在前端开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。而`jquery.turbolinks`是针对一个名为Turbolinks的库设计的jQuery插件,旨在解决Turbolinks在页面替换过程...

    Wrox.Professional.Ruby.on.Rails.Feb.2008

    通过以上章节的详细解读,可以看出《Wrox Professional Ruby on Rails》这本书不仅涵盖了Rails开发过程中的关键技术点,还提供了大量的实际案例和最佳实践,是中级到高级Rails开发者不可或缺的参考资料。

    GroupChat-App:Chat聊天应用程序Ruby on Rails + Haml,SCSS(BEM)+ jQuery(Ajax)+ MySQL + Nginx,AWS(EC2,S3)

    :memo: GroupChat-App Ruby 2.5.1 Ruby on Rails 5.0.7.2 HAML SCSS 边界元JavaScript jQuery的字体真棒5 MySQL2的AWS 亚马逊S3 Nginx的独角兽载波波Capistrano :blue_book: 用法 $ git clone ...cd GroupChat-App$ ...

    goal-diary:日记应用程序Ruby on Rails + Haml,SCSS(BEM)+ jQuery(Ajax)+ MySQL + Nginx,AWS(EC2,S3)

    它是一个您可以共享,反向计算和管理它的站点。 网址 sample_login_account 邮件:样品@样品 通过:1234567890 环境 Ruby 2.5.1 滑轨5.2.4 哈姆 SCSS JavaScript MySQL jQuery的 Ajax异步通信 AWS EC2,S3, ...

    jquery-treetable-ajax-example:带有 D&D 支持的 AJAXified jQuery treeTable 表的 Ruby on Rails 示例

    它在服务器端使用 Ruby on Rails 和 SQLite。 文件 app/views/nodes/index.html.erb 包含有趣的 Javascript 位。 当节点扩展时,它使用 jQuery.ajax 函数下载远程节点。 当节点在分支之间移动 (D&D) 时,它还使用 ...

    Ruby Rails 3 Linda

    10. **Ajax与JavaScript**:Rails与jQuery集成良好,可以方便地实现异步请求。学习如何使用`remote: true`选项创建Ajax链接和表单,以及使用Unobtrusive JavaScript(UJS)驱动JavaScript行为。 11. **Caching**:...

    Agile Web Development with Rails.3E.2009(中文版)

    9. **Ajax和JavaScript**:讨论如何在Rails中集成Ajax,利用Unobtrusive JavaScript(UJS)和jQuery库来增强用户体验。 10. **部署和维护**:涵盖了如何将Rails应用部署到生产环境,包括服务器配置、数据库迁移和...

    Pragmatic.Bookshelf.Advanced.Rails.Recipes.May.2008

    这本书主要面向已经熟悉Ruby on Rails基础的开发者,旨在通过一系列实用的解决方案和技巧,提升他们在Rails框架下的开发能力。 在Rails框架中,开发者可以快速构建高效、灵活的Web应用。本书深入探讨了Rails的高级...

    Ruby on Rails中文指南

    Ruby on Rails,简称Rails,是一款基于Ruby语言的开源Web应用框架,它遵循MVC(Model-View-Controller)架构模式,旨在提升开发效率和代码的可读性。Rails以其“约定优于配置”的设计理念,以及“DRY(Don't Repeat ...

    Rails3+GithubOAuth2+设计示例应用程序_Ruby_JavaScript_下.zip

    3. **Devise**:Devise是一个灵活的身份验证解决方案,为Rails应用提供全面的认证管理,包括注册、登录、密码重置等。在OAuth2的场景下,Devise可以用来处理本地用户账户,并与OAuth2集成,提供更丰富的用户管理功能...

    CoffeeScript Programming with jQuery, Rails, and Node.js.pdf 下载

    我们可以看出,《CoffeeScript Programming with jQuery, Rails, and Node.js》这本书涵盖了CoffeeScript在Web开发领域的广泛应用,不仅包括了与主流前端库jQuery的结合,还深入探讨了其在Ruby on Rails和Node.js等...

    在Ruby on Rails中使用AJAX的教程

    在Ruby on Rails框架中,AJAX(异步JavaScript和XML)的使用极大地提升了用户体验,因为它允许在不刷新整个页面的情况下更新内容。Rails通过内置的Prototype.js库简化了AJAX的集成,使得开发者可以快速创建富互联网...

    extr:Extr是E​​xt Direct Router的Rails 3.x和4.x兼容版本,具有一些附加功能

    ExtR 一个开源的Ruby on Rails 4.x和Ruby on Rails 3.x引擎,用于在Rails应用程序中使用Ext.Direct。 ExtR是著名的的的Ruby on Rails 4.x和Ruby on Rails 3.x兼容实现。 如果要使用Ruby的功能编写ExtJS UI,请查看 ...

    jQuery File Upload文件上传插件 v10.32.0.zip

    10. **服务器端支持**:jQuery File Upload不仅限于前端,还提供了与后端服务器通信的接口,支持各种服务器平台,如PHP、Ruby on Rails、ASP.NET等。 压缩包中的"说明.htm"文件很可能是插件的使用指南,详细介绍了...

    Ajax on Rails

    而Ruby on Rails(简称Rails)是一个流行的开源Web开发框架,它遵循“约定优于配置”的原则,强调简洁和生产力。 **Ajax基础** Ajax的核心在于创建异步通信,通常通过JavaScript实现。JavaScript可以监听用户的...

    Rails3-使用ajax处理并发

    标题 "Rails3-使用ajax处理并发" 涉及的是在Ruby on Rails 3框架中如何利用Ajax技术处理并发请求。Rails是一个流行的Web应用程序开发框架,它基于Ruby语言,而Ajax(Asynchronous JavaScript and XML)则是一种允许...

    ruby rails recipes

    ### Ruby on Rails Web ...以上内容仅是本书的一部分亮点,实际上,《Ruby on Rails Web Development Recipes》一书涵盖了更多的技术和实践,对于希望深入了解 Ruby on Rails 开发的读者来说是一本非常有价值的参考书。

Global site tag (gtag.js) - Google Analytics