如何阻止Ajax调用刷新页面？

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>

This is my html form on a Django rendered page

<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;
               });

This is the ajax function on the page. The problem is...the current page is the result of a form on a previous page so as soon as the form-submit event is invoked the page refreshes and data on the page is lost. I tried both

e.preventDefault()

and

e.stopPropagation()

but that doesn't help. I'd like to know if you have some approach or a workaround..Thank you!

Answer 1

To make this work change this part of code:

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

Like that:

<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">

The submit button is not necessary.

Then change your script to send an ajax request to $('#sbtn') click event. And then submit your form.

Answer 2

$(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;
        })