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>

这是我在Django呈现页面上的html表单

<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

要使此工作更改此部分代码，请执行以下操作：

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

不需要提交按钮。

然后更改脚本，以向$('#sbtn') click事件发送一个ajax请求。然后提交您的表格。

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

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

2 个答案: