繁体   English   中英

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

[英]How do I stop ajax call from refreshing my page?

            <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()

但这无济于事。 我想知道您是否有一些方法或解决方法。谢谢!

为了使这项工作更改这部分代码:

<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请求。 然后提交您的表格。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM