为什么 AJAX 不停止页面刷新？答案

【问题标题】：Why does AJAX not stop page refresh?为什么 AJAX 不停止页面刷新？
【发布时间】：2020-11-21 03:36:06
【问题描述】：

有人可以帮助我在 Django 中使用 AJAX。我正在尝试创建一个带有 2 个输入的简单表单，并将其发送到我的 python 后端而不刷新页面。这是我的 AJAX 代码：

<script type="text/javascript">
  $(document).ready(function(){
    $("#seearch").submit(function(e){
      e.preventDefault()

      $.ajax({
        type:'POST',
        url:'/some/',
        data:{
          origin:$('#origin').val(),
          destination:$('#destination').val(),
          },
        success:function(){
          document.write("HelloWorld")

        }

      });
      return false;

    });
  });

</script>

这是我用于表单的代码：

<div style = " 
      width:0.01px; 
      height:0.01px; 
      position:relative; 
      top:-700px; 
      left:0px;">

      <div class="container px-5 py-24 mx-auto flex flex-wrap items-center" >
        <form id="seearch">

          <input id="origin" class="button" name="origin" placeholder="Where from?" type="text"><div></div>
          <input id="destination" class="button" name="destination" placeholder="Where to?" type="text">
          <input class="button" name="navigate" type="submit" placeholder="navigate">
        </form>
      </div>

  </div>

发送到后端的请求应该是 AJAX 请求，但几乎就像表单忽略了 AJAX 代码一样。当我单击提交时，它只是简单地提交表单并刷新页面。我已经为此苦苦挣扎了将近 2 天，如果有什么可以帮助我弄清楚我哪里出错了，那将是一个很大的帮助。谢谢！

【问题讨论】：

那个脚本标签代码是放在你发布的html下面吗？
检查控制台中是否也没有 Jquery 错误
问题是你的按钮类型引起的，请看我的回答。

标签： javascript html django ajax

【解决方案1】：

您的提交按钮是 type="submit" 。所以它会尝试按照“html表单属性”重新加载页面。

所以你有两个选择：

将 type="submit" 更改为 type="button" 。所以表单不会自动提交。但是这个解决方案的问题是，你的其他表单属性，比如 required 和其他东西都不起作用。
更合适的解决方案是：

-你的表单元素-

JavaScript 部分：

function mySubmitFunction(e) {
   e.preventDefault();
   ------ ajax--------
}

选择适合您的问题的选项。

【讨论】：