javascript - Django : Ajax form still reloads the whole page

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

要防止在 Enter 时提交，请添加按键事件来运行并检测何时按下 Enter。像这样:

$('#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。