AJAX 및 Rails로 양식 제출

지금 당장 AJAX로 제출할 양식을 얻는 데 어려움을 겪고 있습니다. 결국 나는 성공에 대한 DIV를 바꿀 것이지만, 지금 당장은 그것을 얻고 싶습니다.AJAX 및 Rails로 양식 제출

<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는 다음과 같습니다 : 형태에 대한 내 코드는 다음과 같습니다 당신이 빈 action을 떠나 ommitted했습니다 비록

$(document).ready(function(){ 

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

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

}); 

});

어떤 제안이 큰

출처

2014-12-01 Nilnoc

어떤 오류가 있습니까? –

거기에 충분한 정보가있다, 약간 연구를하십시오. – Nithin

JS는 결코 실행되지 않습니다. 날 믿어. 여기에 게시하는 것은 연구 부족 때문이 아닙니다. – Nilnoc

것 form 요소에있는 method의 경우 기본 URI는 여전히 현재 URI 인 GET입니다. 즉, 양식에서 기본 동작을 중지하지 않는다는 의미입니다.

귀하의 AJAX success 처리기는 AJAX 요청이 성공한 후 (2xx HTTP 코드가있는 서버에서 돌아온 경우)에만 호출됩니다. 양식이 정상적으로 제출되기 때문에 AJAX 요청이 완료되지 않아서 기본 작업을 방지하려고 시도하지 못할 수도 있습니다.

submit 이벤트를 처리 할 때 AJAX 요청을 시작하기 직전에 기본 동작을 방지해야합니다.

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

출처

2014-12-01 06:17:14 maxbeatty

AJAX 및 Rails로 양식 제출

답변

관련 문제