Jquery Ajax HTTP Post

Question

양식 제출시 자동 게시를 수행해야합니다. 해당 게시물의 결과는 div에로드되어야합니다. 게시물은 정상적으로 작동하지만 브라우저는 해당 페이지를 자동으로 div에로드하는 대신 게시 된 페이지로 사용자를 유도합니다. 여기에 코드가 있습니다 ...

$('#task_details_form').submit(function() { 
      // Submit AJAX request 
     $.ajax({ 
       url  : $(this).attr('action'), 
       type  : 'post', 
       data  : $(this).serialize(), 
       cache : false, 
       success : function(data) { 
         $('#user_tasks').html(data);  
        } 

       }); 
     return false; 
    }); 

나는 한동안 구문을 사용하여 놀았습니다. 어떤 아이디어?

나는 e와 함께 그리고 아직 행운이없이 이것을 시도했다.

$('#task_details_form').click(function(e) { 
     e.preventDefault(); 
      // Submit AJAX request 
     $.ajax({ 
       url  : $(this).attr('action'), 
       type  : 'post', 
       data  : $(this).serialize(), 
       cache : false, 
       dataType : 'json', 
       success : function(data) { 
         $('#user_tasks').html(data);  
        } 

       }); 
     return false; 
    }); 

Answer 1

아약스 요청의 ContentType을 알려야합니다. conentType을 추가하십시오.

서버로 데이터를 보낼 때이 내용 유형을 사용하십시오. 기본값은 "application/x-www-form-urlencoded; charset = UTF-8"이며, 대부분의 경우 에 적합합니다. 명시 적으로 content-type을 $ .ajax()에 전달하면 (데이터가 전송되지 않더라도 항상) 서버로 전송됩니다. 문자 집합을 지정하지 않으면 서버의 기본 문자 집합 을 사용하여 데이터가 서버로 전송됩니다. 서버 측에서 적절히 디코딩해야합니다.

contentType:"Application/JSON" 

Answer 2

당신은 양식 제출의 기본 동작을 방지 할 필요가있다. 일반적으로 양식을 제출하면 브라우저가 현재 페이지에서 대상 페이지로 리디렉션됩니다. 와 함수를 만드는,

e.preventDefault(); 

Answer 3

시도해보십시오 함수의 첫 번째 라인으로 다음

$('#task_details_form').submit(function() { 

$('#task_details_form').submit(function(e) { 

에 다음 추가 :

당신은 변경해야 아약스에 코드를 게시하고 버튼 클릭으로 전화 걸기

예

function PostMe(){ 
    var myForm = $('form#id_of_your_form'); 

     $.ajax({ 
     url  : myForm.attr('action'), 
     type  : 'post', 
     data  : myForm.serialize(), 
     cache : false, 
     success : function(data) { 
         $('#user_tasks').html(data);  
        } 

     }); 
} 

하고 버튼

<button onclick="PostMe();">Async Post</button>