Question

我正在使用带有ajax的django表单使用此代码：

 <form id="form-id">
     <p> Search : <input name="{{ form.query.html_name }}" value="{{ form.query.value }}" type="search" id="form-input-id" autofocus onfocus="var temp_value=this.value; this.value=''; this.value=temp_value">
     </p>
 </form>

和Javascript代码：

   $( document ).ready(function() {
       $('#form-id').on('change', function() {
           this.submit();
       })

      $('#form-id').on('submit', function(evt) {
          evt.preventDefault();

          var form = evt.target;

          $.ajax({
              url: form.action,
              data: $(form).serialize(),
              success: function(data) {
                  $('.results').html(data);
              }
          });
      });
  });

但事情就是这样，每次触发提交事件时，我觉得整个页面都被重新加载（它闪烁）。我该怎么做才能防止这种情况发生？

Answer 1

您的change活动正在提交表单和页面刷新。删除它并将change事件添加到第二个功能，您当前正在等待submit事件。

$('#form-id').on('change', function(evt) {
      var form = evt.target;
      $.ajax({
          url: form.action,
          data: $(form).serialize(),
          success: function(data) {
              $('.results').html(data);
          }
    });
});

要防止在输入时提交，请将按键事件添加到功能中并检测按下输入的时间。像这样：

$('#form-id').on('change keypress', function(evt) {
    var key = evt.which;
    if (key == 13) {
        return false;
    } else {
        var form = evt.target;
        $.ajax({
            url: form.action,
            data: $(form).serialize(),
            success: function(data) {
                $('.results').html(data);
            }
        });
    }
});

输入密钥号码13。按下时，不会返回任何内容。您也可以将return false替换为evt.preventDefault()。而对于其他键，将触发Ajax。

Answer 2

如果添加：

，该怎么办？

return false;

代码，如下：

$( document ).ready(function() {
       $('#form-id').on('change', function() {
           this.submit();
       })

      $('#form-id').on('submit', function(evt) {
          evt.preventDefault();

          var form = evt.target;

          $.ajax({
              url: form.action,
              data: $(form).serialize(),
              success: function(data) {
                  $('.results').html(data);
              }
          });
          return false;
      });
  });

来自：

https://simpleisbetterthancomplex.com/tutorial/2016/11/15/how-to-implement-a-crud-using-ajax-and-json.html

这里有一个非常重要的细节：在函数的最后我们是返回假。那是因为我们正在捕捉表单提交事件。所以要避免浏览器执行完整的HTTP POST 服务器，我们取消了返回false的默认行为功能

我如何在html / django模板中指定我的表单：

<form id="form-id" action="required-url-goes-here" method="post">
     <p> Search : <input name="{{ form.query.html_name }}" value="{{ form.query.value }}" type="search" id="form-input-id" autofocus onfocus="var temp_value=this.value; this.value=''; this.value=temp_value">
     </p>
 </form>

我上面指出的教程以与您不同的方式工作。它在ajax请求中指定： - 网址 - 类型 - 数据 - dataType

它也使用不同的方式来引用表单，这是我所知道的唯一方法，因此我无法判断代码的其余部分是否存在错误。

Django：Ajax表单仍然重新加载整个页面

2 个答案: