내 ajax div로드가 전체 페이지를 새로 고침합니다.

Question

저는 아약스 양식을 가지고 있으며 전체 페이지 대신 div를 다시로드하려고합니다. 나는 많은 것을 시도했다, 나는 많은 stackoverflow 주제를 가지고있다. 내가해야 할 일을 알아 내지 못한다.

if ($_POST['guide']) { 
    $settings->addGuide($_POST['guide']); 
} 

편집 : Formcodes :

이

<div class="col-md-4"> 
    <h2>test title</h2> 
    <p class="guids">This is a test text.</p> 
    <form method="post" id="guideForm"> 
    <input name="guide" value="1" style="positon:absolute; display:none;"> 
    <button class="btn btn-primary">Got it!</button>  
    </form>   
</div> 

누군가가 나를 도울 수이 내 handling.php입니다

$(document).ready(function(){ 
    $('#guideForm').submit(function(){ 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

:

이

내 handling.js입니다 내가 뭘 잘못했는지 알아 내려고?

파비안 # 웹 별

Answer 1

당신은 e.preventDefault()

$('#guideForm').submit(function(e){ 
     e.preventDefault(); // added this line and an argument 'e' to the function 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 

Answer 2

당신이 양식을 제출하는 경우 즉의 기본 동작을 방지 할 필요가 제출에서 페이지를 중지하려면 시도해야합니다.

요청 후 DOM에서 양식을 제출하기 때문에 페이지가 다시로드됩니다. 그리고 기본 동작으로, 폼은 액션 매개 변수를 지정하지 않은 것과 같은 페이지에 자신을 제출합니다.

그래서 여러 가지 방법이 있습니다.

i). 이벤트 개체의 메서드를 사용하여 JS 이벤트 전파를 중지합니다. 이처럼

:

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); //stop default behaviour 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

이이 일의 가장 공식적인 방법입니다.

ii). 제출 단추/입력을 간단한 단추로 변경하고 ajax를 onClick 이벤트로 바인드 할 수 있습니다. 이와 같이

:

$(document).ready(function(){ 
$('#fakeSubmitButton').click(function(e){ 
    $.ajax({ 
     type: 'POST', 
     url: '../includes/handling.php', 
     data: $(this).serialize() 
    }) 
    .done(function(data){ 
     $('#guide').load(document.URL + ' #guide'); 
    }) 
    return false; 
}); 
}); 

III). 양식의 작업 속성으로 javascript:void(0)을 정의 할 수 있습니다. 그러면 자동으로 양식이 제출되지 않습니다.

iv).false을 이벤트 처리기에서 반환합니다. 현재하고있는 일. 우리는 이벤트 객체에 .preventDefault()를 호출하거나 핸들러에서 false를 반환하여 제출 조치를 취소 할 수 있습니다

: 그 자체가 말했다의 jQuery 문서대로 작동하지 않는 이상하다.

아마 다음 포스트는 당신을 도울 수 있습니다 : jQuery - Form still submits with return false

는 또한 위의 게시물에 첸 쓰 린의 답을 확인한다. return false을 사용하지 말아야 할 때 링크가 제공됩니다.

희망이 도움이됩니다.

Answer 3

사용 e.preventDefault();

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

Answer 4

$('#guideForm').submit() 

위 JQuery와 문은 기본적으로 기본적으로 코드를 다시로드 것이다 배를 제출하는 것입니다. 당신이하지 않으려면이이 방지 할 수

event.preventDefault(); 

다음이 양식의 제출 및

Answer 5

내가 당신의 js에 오류가 있다고 생각 기능의 코드를 실행 추가

을 발생합니다 그것이 예상대로 실행되지 않는 이유입니다. 오류가 있는지 확인 했습니까? 어쩌면 그것은 $ .ajax 함수에 대한 종료가 없기 때문일 수 있습니다. ";" 터미네이터.

$(document).ready(function(){ 
    $('#guideForm').submit(function(){ 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }); 

     return false; 
    }); 
}); 

Answer 6

사용 e.preventDefault(); 제출의 기본 동작을 중지합니다.

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); //stop default behaviour 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
});