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

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

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

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

onblur提交表单部分工作正常

---

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

原因是您在本机表单元素上调用了

submit

事件，而不是引用表单的jQuery对象。因此，jQuery

submit

事件处理程序不会启动

要解决此问题并改进您的代码，请从HTML中删除过时的

onclick

属性，并为

blur

事件使用一个不引人注目的事件处理程序-尽管请注意，

change

似乎更合适，因为它在blur上触发，但只有在字段的值更改之后，这将为您节省一些时间edless服务器请求。然后您可以在保存表单引用的jQuery对象上触发

submit

，如下所示：

项目名称

$（文档）.ready（函数（）{
var$form=$（“#title_form”）；
var root=$（'#url_root'）.val（）；
var php_file='assets/ajax/update.php'；
var url=root+php\u文件；
$（'project_title'）。关于（'change'，function（）{
$form.trigger（'submit'）；
});
$form.on（'submit'，函数（e）{
e、 预防默认值（）；
$.ajax({
类型：“POST”，
url:url，
数据：$（this）.serialize（），
成功：功能（响应）{
var jsonData=JSON.parse（响应）；
console.log（jsonData）；
}
});
});
});

谢谢你的建议！我调整了我的代码：但是在我的控制台中得到了这个：script.js:16 Uncaught TypeError:$.ajax不是一个函数加上这个在HTMLFormElement。（script.js:16）在HTMLFormElement.dispatch（jquery-3.3.1.slim.min.js:2）在HTMLFormElement.v.handle（jquery-3.3.1.slim.min.js:2）在Object.trigger（jquery-3.3.1.slim.min.js:2）在HTMLFormElement（jquery-3.1.slim.min.js:2）在Function.each（jquery-3.3.1.slim.min.js:2）在w.fn.init.each（jquery-3.3.1.slim.min.js:2）在HTMLInputElement（jquery-3.3.1.slim.js:2）在HTMLInputElement.dispatch（jquery-3.3.1.slim.js:2）处您使用的是jQuerySlim，它没有AJAX方法（以及其他方法）。您需要用完整版本的JQueryEP来替换它！您真是太棒了！谢谢您的帮助，有些人在这个平台上可能会非常苛刻，但这太棒了，我实际上从您的回答中学到了很多！@MikeAbineri您的问题是详细的，经过研究的，并且带有代码，所以我们通常会更好地对待您而不是“给我代码”类型的问题

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