Как мне остановить Ajax Call от обновления моей страницы?

Question

            <form id="review" method="post">
                 {% csrf_token %}
            <button type="submit" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >
                <span class="icon text-white-50">
                  <i class="fas fa-poll-h"></i>
                </span>
                <span class="text">Fetch Reviews</span>
              </button>
                </form>

Это моя HTML-форма на странице, отрисованной в Django

<script type="text/javascript">
$(document).on('submit','#review'.function(e){
                e.preventDefault();
                e.stopPropagation(); 
                $.ajax({
                  type:'POST',
                  URL:'/reviews/',
                    data:{
                        asin:$('#sbtn').val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                        },
                    beforeSend:function() {
                     $('#loader').removeClass('hidden');
                    },
                    complete : function() {
                        $('#loader').addClass('');                      
                    }});
                return false;
               });

Это функция ajax на странице.Проблема в том, что ... текущая страница является результатом формы на предыдущей странице, поэтому, как только вызывается событие отправки формы, страница обновляется и данные на странице теряются.Я пробовал оба

e.preventDefault ()

и

e.stopPropagation ()

но это не помогаетЯ хотел бы знать, есть ли у вас какой-то подход или обходной путь .. Спасибо!

Answer 1

$(document).on('submit','#review', function() {
            $('#loader').removeClass('hidden');
            $.ajax({
                method: "POST",
                type: "POST",
                url: "/reviews/",
                data: {
                    asin:$('#sbtn').val(),
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                }
            }).done( function( msg )  {

                $('#loader').addClass('');
                console.log(msg)
            }).fail( function(error) {
                console.log(error)
            })
            return false;
        })

Answer 2

Для выполнения этой работы измените эту часть кода:

<button type="submit" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >

Вот так:

<button type="button" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >
<button type="submit" id="submit_sbtn" class="d-none">

Кнопка отправки не нужна.

Затем измените ваш скрипт, чтобы отправить ajax-запрос на $('#sbtn') событие клика. А затем отправьте свою форму.