Javascript 使用jQuery调用API，然后刷新包含表单的div的内容？_Javascript_Jquery_Html_Ajax_Post

Javascript 使用jQuery调用API，然后刷新包含表单的div的内容？

javascript jquery html ajax post

Javascript 使用jQuery调用API，然后刷新包含表单的div的内容？,javascript,jquery,html,ajax,post,Javascript,Jquery,Html,Ajax,Post,我有一个div中包含表单的页面。提交表单将刷新div的包含页面。当我提交表单时，jQuery不会中断表单的提交并执行我的代码： <html> <head> <script src="/js/jquery.prod.2.2.0.js"></script> <script> $("#genericForm").on('submit', function(e) { console.log("Here"); $.ajax({

我有一个div中包含表单的页面。提交表单将刷新div的包含页面。当我提交表单时，jQuery不会中断表单的提交并执行

我的代码：

<html>
<head>
<script src="/js/jquery.prod.2.2.0.js"></script>
<script>
$("#genericForm").on('submit', function(e) {
    console.log("Here");
    $.ajax({
           type: "POST",
           url: "/app.php";
           data: $(this).serialize(),
           success: function(data){
           console.log(data);
         }
    });
e.preventDefault();
return false;
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method=post action="/app.php" id="genericForm"> 
<input name=firstname type=text>
<input name=lastname type=text>
<input name=nickname type=text>
<input type=submit>
</form>
</body>
</html>


$（“#genericForm”）。关于（'submit'，函数（e）{
console.log（“此处”）；
$.ajax({
类型：“POST”，
url:“/app.php”；
数据：$（this）.serialize（），
成功：功能（数据）{
控制台日志（数据）；
}
});
e、 预防默认值（）；
返回false；
});

e.preventDefault

阻止元素的默认行为。但它应该放在执行任何其他任务之前，而不是放在默认功能之前

$("#genericForm").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
           type: "POST",
           url: "/app.php";
           data: $(this).serialize(),
           success: function(data){
           console.log(data);
         }
    });
});

正如Richard在评论中所建议的，尝试将

e.preventDefault（）

移动到函数顶部。提交和刷新很可能是在注册

e.preventDefault（）

之前发生的。

首先，这里有一个语法错误：

url: "/app.php";

url: "/app.php";
______________^^

您需要逗号而不是分号：

url: "/app.php",

另外，您需要将代码放入

$（文档）中。准备好事件处理程序以使其工作。由于在放入表单之前先放入了代码，因此会立即执行，而在DOM中找不到任何表单。因此，请按如下方式进行修复：
$(document).ready(function () {
    $("#genericForm").on('submit', function(e) {
        console.log("Here");
        $.ajax({
            type: "POST",
            url: "/app.php",
            data: $(this).serialize(),
            success: function(data){
                console.log(data);
            }
        });
        e.preventDefault();
        return false;
    });
});

语法错误未捕获的语法错误：意外标记中断提交处理程序

它与e.preventDefault（）无关
此处存在语法错误：
url: "/app.php";

url: "/app.php";
______________^^

它必须是，
如下：url:“/app.php”，

试试这个：

$（“#genericForm”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
console.log（“此处”）；
$.ajax({
类型：“POST”，
url:“/app.php”，
数据：$（this）.serialize（），
成功：功能（数据）{
控制台日志（数据）；
}
});
});

尝试移动e.preventDefault（）到函数的顶部。不知道这是否有效；在函数的顶部，代码仍然不执行。与其使用
，不如使用
或
标记。然后使用$（jquery\u selector）。在（'单击'…
。这将使您的生活更轻松。：-），因为我想在选择框更改、复选框更改和“按enter键”时提交的各种表单上使用此功能。因此，捕获跨距在某些页面上有效，但对其他页面无效；到函数的开头，但没有乐趣。我看到了错误。我修复了它，但仍然无法在控制台日志中获取和内容。页面转发到/app.php。谢谢Rayon，TaReQ已经指出了错误，但是更改仍然没有执行代码。我已经移动了e.preventDefault（）；改变了传统,；到，但代码仍然没有执行。我在答案中附加了fiddle url。我希望这有帮助。如果没有，则检查控制台是否有错误或url
或接收到的响应；）