jQuery : .post() 메소드로 페이지를 다시 게시하지 않습니까?

Question

포함 된 페이지를 게시하지 않고 jQuery의 .post() 메서드를 사용하는 것에 관한 질문이 있습니다.

이것은 도서관 시스템의 책 페이지를위한 코드입니다. 사용자가 "Return book"버튼을 클릭하면 jQuery의 .post()을 사용하여 데이터베이스에 반환 된 책을 설정합니다.

<form id="checkoutform"> 
<input type="submit" id="checkout" class="button" value="Return book" /> 
</form> 
$(document).ready(function(){ 
    $("#checkout").click(function() { 
    $.post('/transaction/', { book_id: '{{ book.id }}', user_id: username }, function(data) { 
     alert(data); 
     }); 
    }); 
}); 

데이터베이스 트랜잭션은 찾기를 작동하지만 페이지를 다시 게시합니다.

이것은 문제는 아니지만 뒤로 버튼의 동작을 변경합니다. 이는 문제입니다. 사용자가 '책 반환'을 클릭 한 다음 브라우저의 뒤로 버튼을 사용하면 책을 반환하기 전에 책 페이지가 표시되어 책이 여전히 체크 아웃 된 것처럼 보입니다. JQuery와 .post() 방법으로 페이지를 다시 게시

• 하지 말고, 그냥 내가 필요로하는 페이지의 일부를 변경, 또는
• 그렇게 뒤로 버튼을 수정 :
  는 방법 중 하나에이 앞 페이지로 곧장 간다?

감사합니다.

Answer 1

실제로 실제로 발생하는 것은 클릭 기능이 실행되는 것입니다. 그리고 기본 기능 ('제출'버튼을 누르면 양식 제출)이 발생합니다.

버튼을 제출 버튼 대신 일반 버튼으로 만들거나 클릭 기능 끝에 return false을 추가하십시오. 또는 jQuery의 event.stopPropagation()을 살펴보십시오.

Answer 2

추가는

$(document).ready(function(){ 
    $("#checkout").click(function() { 
    $.post('/transaction/', { book_id: '{{ book.id }}', user_id: username }, function(data) { 
     alert(data); 
     }); 
    return false; 
    }); 

}); 

Answer 3

가 클릭 기능에 return false;을 던져보십시오 함수의 끝에서 false를 돌려줍니다. 아마도 실제로 페이지를 제출하고 비동기 적으로 진행되는 대신. 작동하지 않는다면 아약스 페이지는 어떻게 생겼을까요?

Answer 4

jQuery 이벤트 핸들러 끝에 return false을 추가하면 기본 이벤트 핸들러가 실행되지 않습니다. 귀하의 경우, 양식 제출의 기본 동작은 POST를 수행하는 것입니다.