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 に答える