为什么 Ajax 在移动设备上通过 POST 方法提交表单后会刷新页面？答案

【问题标题】：Why does Ajax refresh page on mobile devices after submitting form via POST method?为什么 Ajax 在移动设备上通过 POST 方法提交表单后会刷新页面？
【发布时间】：2018-08-27 13:05:34
【问题描述】：

我正在尝试在我的 Django 网站上提交表单。 Ajax 适用于桌面上的表单提交，并且在提交时不会刷新页面，而在移动设备上使用时，POST 数据已成功提交，但页面在请求后刷新。提交后如何防止刷新？

<script>
        $(document).ready(function(){
              $('#email_button_secondary_submit').on('click', function(e){
                $('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-chevron-right');
                $('#email_button_secondary_submit > span').addClass('fa fa-spinner fa-spin');
                $emailaddress = $('#email').val();
              $.ajax({
                type: "POST",
                url : '',
                cached: false,
                data: {
                    email: $emailaddress,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function () {
                    $('.Subscribe').hide();
                    $('.Thanks').show();
                },
                complete: function () {
                    $('#email_button_secondary_submit > span').removeClass('fa fa-spinner fa-spin');
                    $('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-ok');
                },
                error: function () {
                    $('.Subscribe').hide();
                    $('.Error').show();
                    $('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-ok');
                    $('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-remove');
                },
              });
              e.preventDefault();
            });
          });
    </script>

编辑 1：我检测到 on click 块无法在移动设备上执行。（我注意到通过添加 alert() 之后 $('#email_button_secondary_submit').on('click', function(e){

【问题讨论】：

是 o ios 还是 android 或两者兼而有之？
安卓和ios都可以。数据提交成功，但页面同时刷新。桌面上没有问题
鉴于您调用 e.preventDefault(); 它确实可以在桌面上工作，这让我感到更惊讶在 AJAX 语句之后。
我认为是您的jquery版本问题，您使用的是哪个版本？
jQuery 版本 3.2.0 ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js

标签： javascript jquery html django

【解决方案1】：

注意“function(e)”中的“e”。你应该添加那个。还要让你的“e.preventDefault();”就像我在下面一样。

<script>
    $(document).ready(function(){
          $('#email_button_secondary_submit').on('click', function(e){
            e.preventDefault();
            $('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-chevron-right');
            $('#email_button_secondary_submit > span').addClass('fa fa-spinner fa-spin');
            $emailaddress = $('#email').val();
          $.ajax({
            type: "POST",
            url : '',
            cached: false,
            data: {
                email: $emailaddress,
                csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
            },
            success: function () {
                $('.Subscribe').hide();
                $('.Thanks').show();
            },
            complete: function () {
                $('#email_button_secondary_submit > span').removeClass('fa fa-spinner fa-spin');
                $('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-ok');
            },
            error: function () {
                $('.Subscribe').hide();
                $('.Error').show();
                $('#email_button_secondary_submit > span').removeClass('glyphicon glyphicon-ok');
                $('#email_button_secondary_submit > span').addClass('glyphicon glyphicon-remove');
            },
          });
        });
      });
</script>

【讨论】：

搞错了，改“e.preventDefault();”在点击功能下。 $('#email_button_secondary_submit').on('click', function(e){ e.preventDefault();