백그라운드에서 작업하는 대신 Ajax 폼을 다시로드하는 중

Question

먼저 다른 제안에 따라 필자는 preventDefault()를 둘러 보았지만 성공하지 못했습니다.

내 의견 양식은 양식 필드에 "process.php"를 전달하고 관련 메시지를 반환하기 위해 자바 스크립트를 사용합니다 (예 : "sucesss"또는 "실패")

그것은 것을 제외하고 그 일을 대신에 머물고 이와 그 부하 'process.php'페이지 'feedback.php'같은 페이지에 ... { "데이터": "데이터 값"}

을 Heres 코드 :

$(document).ready(
function(){ 
    $('form').submit(
     function(event){ 
      var formData = 
      { 
       'name' : $('input[name=name]').val(), 
       'page' : $('input[name=page]').val() 
      }; 

      $('.form-group').removeClass('has-error'); // remove the error class 
      $('.error').remove(); // remove the error text 

      event.preventDefault(); 

      $.ajax({ 
        type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
        url  : 'process.php', // the url where we want to POST 
        data  : formData, // our data object 
        dataType : 'json', // what type of data do we expect back from the server 
        encode : true 
       }) 

      .done(function(data){ 
        if (! data.success) 
        { 
         if (data.errors.name) 
         { 
          $('#name-group').addClass('has-error'); // add the error class to show red input 
          $('#nameField').append(data.errors.name); // add the actual error name under our input 
         } 
        } 
        else 
        { 
         $('form').append('<div class="buttonError">Message Sent!</div>'); 
         form.myButton.disabled = true; 
        } 
       } 
      ); 

      .fail(function(data){ 
        $('form').append('<div class="buttonError">Failed!</div>'); 
       } 
       console.log(data); 
      ); 
      event.preventDefault(); 
     } 
    ); 
}); 

Answer 1

는 방법을 제거 및 HTML 파일의 form 태그에있는 조치. 이것은 괜찮아 보인다. 작동하지 않는지 알려주세요.

Answer 2

은 $ 아약스를 호출하는 구문 오류가, 그것은 다음과 같이 수정해야 다음과 같습니다

$.ajax({ 
     type  : 'POST', // define the type of HTTP verb we want to use (POST for our form) 
     url  : 'process.php', // the url where we want to POST 
     data  : formData, // our data object 
     dataType : 'json', // what type of data do we expect back from the server 
     encode : true 
    }).done(function(data){ 
     if (! data.success) 
     { 
      if (data.errors.name) 
      { 
       $('#name-group').addClass('has-error'); // add the error class to show red input 
       $('#nameField').append(data.errors.name); // add the actual error name under our input 
      } 
     } 
     else 
     { 
      $('form').append('<div class="buttonError">Message Sent!</div>'); 
      form.myButton.disabled = true; 
     } 
    }).fail(function(data){ 
     $('form').append('<div class="buttonError">Failed!</div>'); 
     console.log(data); 
    });