jQuery: не публиковать страницу с методом .post ()?

Question

У меня есть вопрос об использовании метода .post() в jQuery без отправки обратно содержащей страницы.

Это код страницы книги в библиотечной системе.Если пользователь нажимает кнопку «Вернуть книгу», я использую 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 предотвратит выполнение обработчика событий по умолчанию.Поскольку в вашем случае отправка формы по умолчанию заключается в выполнении POST, вот что происходит.

Answer 2

На самом деле, вероятно, происходит то, что ваша функция щелчка срабатывает, а затем, кроме того, появляется функция по умолчанию (отправка формы при нажатии кнопки «Отправить»).

Чтобы предотвратить этолибо сделайте кнопку простой кнопкой вместо кнопки отправки, либо добавьте return false в конце функции щелчка.Или взгляните на jQuery event.stopPropagation () .

Answer 3

Попробуйте добавить return false; в функцию щелчка.Может быть, это на самом деле отправка страницы и вместо того, чтобы идти асинхронно.Если это не сработает, как будет выглядеть ваша страница ajax?

Answer 4

добавить возврат false в конец функции

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

});