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

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">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-12">&nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label for="project_title">Project Title</label>&nbsp; &nbsp; &nbsp; &nbsp; <div class="input-group input-group-lg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="project_title" type="text" class="form-control" name="project_title" required>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></form>$(document).ready(function() {&nbsp; var $form = $('#title_form');&nbsp; var root = $('#url_root').val();&nbsp; var php_file = 'assets/ajax/update.php';&nbsp; var url = root + php_file;&nbsp; $('#project_title').on('change', function() {&nbsp; &nbsp; $form.trigger('submit');&nbsp; });&nbsp; $form.on('submit', function(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; data: $(this).serialize(),&nbsp; &nbsp; &nbsp; success: function(response) {&nbsp; &nbsp; &nbsp; &nbsp; var jsonData = JSON.parse(response);&nbsp; &nbsp; &nbsp; &nbsp; console.log(jsonData);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; });});