使用 AJAX 和 Rails 提交表单答案

【问题标题】：Submitting form with AJAX and Rails使用 AJAX 和 Rails 提交表单
【发布时间】：2014-12-01 03:25:10
【问题描述】：

现在，我在让我的表单使用 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;
       }
     });

});

});

任何建议都会很棒

【问题讨论】：

你遇到了什么错误？
那里有足够的信息，做一些研究。
JS 永远不会被执行。相信我。在这里发帖并不是因为缺乏研究。
我不认为这个 JS 是必要的，只需将您的表单放在表单标签中并添加 remote: true 和您的控制器 format.js 。 Rails 足够聪明，可以理解你想通过 ajax 提交表单

标签： javascript jquery ruby-on-rails ajax forms

【解决方案1】：

即使您在 form 元素上将 action 留空并省略了 method，它仍将分别默认为当前 URI 和 GET，这意味着您不会停止表单这样做是默认行为。

您的 AJAX success 处理程序只会在 AJAX 请求成功后调用（从服务器返回 2xx HTTP 代码）。由于您的表单正在正常提交，因此 AJAX 请求可能永远不会完成，无法到达您试图阻止默认操作的位置。

当您处理 submit 事件时，您会希望在开始 AJAX 请求之前立即阻止默认操作。

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

【讨论】：