`

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
 

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

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

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics