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

debugcn 发表于 Dev

迈克·阿比内里

我是ajax的新手，并且了解一些基本的jQuery。但是，当测试一个简单的测试ajax脚本时，我遇到了困难。

我已经阅读了其他与我们类似的问题，但没有得到任何结果。

我希望实现的目标是：当输入字段“模糊”时，它将提交它所在的表单，将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);
           }
       });
     });
});

这是update.php页面，它以json格式回显发布数据：

<?php
    
    if(isset($_POST['project_title'])){
        echo json_encode($_POST['project_title']);
    }
?>

onblur提交表单部分工作正常！

但是，我的ajax脚本并没有阻止刷新页面（尽管使用e.preventDefault），也没有在控制台中记录响应（我的猜测是因为ajax脚本根本无法工作，因为我错过了一些明显的东西。

罗里·麦克罗森（Rory McCrossan）

原因是因为您submit在本机表单Element上调用该事件，而不是引用该表单的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);
      }
    });
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。