为什么我的表单提交仍然刷新页面？

Question

我是 ajax 新手，知道一些基本的 jQuery。但是，在测试一个简单的测试 ajax 脚本时，我遇到了困难。我已经阅读了与我类似的其他问题，但我无法得到任何结果。我希望实现的目标：当输入字段为“onblur”时，它会提交它所在的表单，将 ajax 请求发送到一个文件，该文件简单地回显以 json 格式提交的内容并将其返回并将响应记录到控制台。这是我所做的。这是单击输入字段时提交的表单：<form id="title_form" method="POST">    <div class="row">        <div class="col-12">            <div class="form-group">                <label for="project_title">Project Title</label>                <div class="input-group input-group-lg">                    <input onblur="return document.getElementById('title_form').submit();" id="project_title" type="text" class="form-control" name="project_title" required>                </div>            </div>        </div>    </div></form>这是ajax脚本：$(document).ready(function() {  var root = $('#url_root').val();  var php_file = 'assets/ajax/update.php';  var url = root+php_file;    $('#title_form').submit(function(e) {        e.preventDefault();        $.ajax({            type: "POST",            url: url,            data: $(this).serialize(),            success: function(response)            {              var jsonData = JSON.parse(response);              console.log(jsonData);           }       });     });});这是以 json 格式回显帖子数据的 update.php 页面：<?php        if(isset($_POST['project_title'])){        echo json_encode($_POST['project_title']);    }?>onblur 提交表单部分工作正常！但是，我的 ajax 脚本并没有阻止页面被刷新（尽管有 e.preventDefault）并且它没有在控制台中记录响应（我的猜测是因为 ajax 脚本根本没有工作，因为我错过了一些明显的东西。

Answer 1

原因是您submit在本机表单元素上调用事件，而不是引用表单的 jQuery 对象。因此，jQuerysubmit事件处理程序不会触发。

要解决此问题并改进您的代码，请onclick从 HTML 中删除过时的属性并为事件使用不显眼的事件处理程序blur- 尽管请注意这change似乎更合适，因为它会在模糊时触发，但仅在字段的值已更改之后，这将为您节省一些不必要的服务器请求。submit然后你可以在持有表单引用的 jQuery 对象上触发，像这样：

<form id="title_form" method="POST">

  <div class="row">

    <div class="col-12">

      <div class="form-group">

        <label for="project_title">Project Title</label>

        <div class="input-group input-group-lg">

          <input id="project_title" type="text" class="form-control" name="project_title" required>

        </div>

      </div>

    </div>

  </div>

</form>

$(document).ready(function() {

  var $form = $('#title_form');

  var root = $('#url_root').val();

  var php_file = 'assets/ajax/update.php';

  var url = root + php_file;

  $('#project_title').on('change', function() {

    $form.trigger('submit');

  });

  $form.on('submit', function(e) {

    e.preventDefault();

    $.ajax({

      type: "POST",

      url: url,

      data: $(this).serialize(),

      success: function(response) {

        var jsonData = JSON.parse(response);

        console.log(jsonData);

      }

    });

  });

});