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>

使用Ajax和Grails显示登录错误

1 个答案: