0

我正在为 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>

这是我的用户控制器：

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 发送一些东西。

在此先感谢您的帮助。

此致。

4

1 回答 1

5

首先，与您的控制器打交道，将重定向发送回 ajax 请求是不够的。当身份验证失败时，您的 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>
于 2013-05-01T19:18:41.580 回答