ajax - 使用Ajax和Grails显示登录错误

Question

我正在使用UI的Grails + Twitter BootStrap开发一个小应用程序。在我的索引页面中，我有一个表单可以登录:

<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>

这是我的用户 Controller :

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来做到这一点。我错了吗 ？

我真的不知道我必须修改/添加 Controller 中的内容以将某些内容发送到Ajax。

在此先感谢您的帮助。

最好的祝福。

Answer 1

首先，与您的 Controller 打交道，将重定向发送回ajax请求根本不够用。并且当身份验证失败时，您的JavaScript怎么知道？因此，我们应该稍微调整一下 Controller 代码:

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>