使用Ajax和Grails显示登录错误

Question

我正在使用Grails + Twitter BootStrap为UI开发一个小应用程序.在我的索引页面中,我有一个要登录的表单:

<g:form controller="user" action="login" id="form-login">
   <h2>Please, log in</h2>
   <g:textField name="userName" placeholder="Email address"/>
   <g:passwordField name="password" type="password" placeholder="Password"/>
   <button id="submitConnection" type="submit">Connection</button>
</g:form>

在这里,是我的用户控制器:

def login(){
    String userName = params.userName
    String password = params.password

    User user = userName ? User.findByUserName(userName) : null
    //If login succeed
    if(user?.password == password){
        session.user = user
        redirect(action: 'index')
    }
    //If login failed
    else{
        render 'Email or password incorrect.'
    }
}

我正在尝试通过JQuery使用Ajax.我不熟悉Ajax/JQuery,所以我不确定我做得好.实际上,我想点击提交按钮来执行Ajax请求.所以我在我的js中写了这个:

$('#submitConnection').click(function() {
  var request = $.ajax({
      url: "/user/login",
      data: { userName: "dummy", password: "dummy"}
  });

  request.done(function ( data ) {
      if( data ) {
          console.log(data);
      }
  });
  request.fail(function(jqXHR, textStatus) {
      alert( "Request failed: " + textStatus );
      });
});

我想当登录无法用"登录失败"等错误消息填写div时,如果成功,只需重定向到索引.我想我必须使用JQuery来做到这一点.我错了吗 ？

我真的不知道我需要在我的控制器中修改/添加什么来向Ajax发送内容.

在此先感谢您的帮助.

最好的祝福.

Answer 1

首先,处理你的控制器,将重定向发送回ajax请求是不够的.当auth失败时,你的javascript是如何知道的？所以我们应该稍微调整你的控制器代码:

def login(){
    String userName = params.userName
    String password = params.password

    User user = userName ? User.findByUserName(userName) : null
    //If login succeed
    if(user?.password == password){
        session.user = user
        render(contentType: 'text/json') {
          [success: true, message: 'Login successful']
        }
    }
    //If login failed
    else{
        render(contentType: 'text/json') {
          [success: false, message: 'Email or Password incorrect']
        }
    }
}

现在关于你的javascript,我从这里开始:

$('#submitConnection').click(function(e) {
  e.preventDefault(); // prevents normal event of button submitting form
  $.post("/user/login", {userName: "dummy", password: "dummy"}, function(data) {
     if (data.success) {
        window.location = "some/path"; 
     } else {
        $("#error-message").html(data.message).show(); 
     }
  });
});

然后你的HTML:

<g:form controller="user" action="login" id="form-login">
   <h2>Please, log in</h2>
   <div id="error-message" class="hide"></div>
   <g:textField name="userName" placeholder="Email address"/>
   <g:passwordField name="password" type="password" placeholder="Password"/>
   <button id="submitConnection" type="submit">Connection</button>
</g:form>