使用AJAX和Rails提交表單

Question

現在，我在使表格向AJAX提交方面有些掙扎。 最終，我將根據成功更改一些DIV，但現在我只是想讓它工作。 我的表單代碼如下所示：

<div class="modal signUpContent fade" id="ModalLogin" tabindex="-1" role="dialog" >
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
        <h3 class="modal-title-site text-center" > Login  to All For Funds </h3>
      </div>
      <div class="modal-body">
        <div id="login_form">
        <form accept-charset="UTF-8"  class="new_user" id="loginForm" name="loginForm" action="">
          <div style="display:none">
          <input name="utf8" type="hidden" value="✓">
          <input name="authenticity_token" type="hidden" value="iapD/wScrrV7ga6YEXGxlI1OZ2sVgfEUsA5RzibKpFw=">
        </div>
        <div class="form-group reg-email">

          <div>
            <input autofocus="autofocus" id="user[email]" name="user[email]" type="email" value="" class="form-control input"  size="20" placeholder="Enter Email">
          </div>
        </div>
        <div class="form-group reg-password">
          <div >
            <input autocomplete="off" id="user[password]" name="user[password]" type="password" class="form-control input"  size="20" placeholder="Password">
          </div>
        </div>
        <div class="form-group">
          <div >
            <input name="user[remember_me]" type="hidden" value="0">
            <div class="checkbox login-remember">
              <label>
                <input id="user[remember_me]" name="user[remember_me]" checked="checked" type="checkbox">
                Remember Me </label>
            </div>
          </div>
        </div>
        <div >
          <div >
            <input name="login-button" id="login-button" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit" onS>
          </div>
        </div>
      </form>
    </div>
        <!--userForm--> 

      </div>
      <div class="modal-footer">
        <p class="text-center"> Not here before? <a data-toggle="modal"  data-dismiss="modal" href="product-details.html#ModalSignup"> Sign Up. </a> <br>
          <a href="forgot-password.html" > Lost your password? </a> </p>
      </div>
    </div>
    <!-- /.modal-content --> 

  </div>
  <!-- /.modal-dialog --> 

</div>
<!-- /.Modal Login --> 

我的JS看起來像這樣：

$(document).ready(function(){

$("#loginForm").submit(function(e) {

$.ajax({
       type: "POST",
       url : "/users/sign_in",
       data: $("#loginForm").serialize(), // serializes the form's elements.
       success: function(data)
       {
           alert('Posting!');
            $('.navigation').load('/application_controller/login');
            e.preventDefault();
            return;
       }
     });

});

});

任何建議都很好

Answer 1

即使您在form元素上保留了空白action和省略的method ，它仍將分別默認為當前URI和GET ，這意味着您不會阻止該表單執行其默認行為。

僅在AJAX請求成功后（從具有2xx HTTP代碼的服務器返回），才會調用AJAX success處理程序。 由於您的表單是正常提交​​的，因此AJAX請求可能永遠無法完成以到達您嘗試阻止默認操作的位置。

當您處理submit事件時，您將希望在開始AJAX請求之前立即采取默認操作。

$('#loginForm').submit(function(e) {
  e.preventDefault();
  $.ajax(...)
});