Question

我是ajax的新手，并且了解一些基本的jquery，但是在测试简单的测试ajax脚本时遇到了麻烦。

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

我希望实现的目标： 当输入字段为“ onblured”时，它将提交表单，将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脚本根本无法工作，因为我错过了一些明显的事情。

非常感谢您的协助！

Answer 1

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

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

submit

<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>

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

1 个答案: