如何在不刷新页面的情况下发送表单数据？

一尘不染

如何在不刷新页面的情况下发送表单数据？

ajax

我已经使用提交按钮在ajax中发送了数据，而没有刷新任何页面。但是页面刷新了。

请检查我的代码，让我知道问题所在。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#idForm").submit(function() { alert("hi");

    var url = "ajax.php";
    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(),
           success: function(data) {
               alert(data);
           }
         });

    return false;
});
</script>
<form id="idForm" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <input type="submit" name="submit" value="Submit" />
</form>

ajax.php

echo "Hello";

阅读 216

2020-07-26

共1个答案

一尘不染

js已经阻止了表单提交

问题中的代码已经阻止了此行提交表单：

return false;

这意味着：问题中的JavaScript代码根本没有运行。

该表格尚不存在

这里的问题是当此行代码运行时：

$("#idForm")...

那个元素还没有加入dom 。因此，提交处理程序不附加任何内容-表单提交时，它只是标准的HTTP发布请求。

要仅解决问题中的问题，请执行以下任一操作

尝试操作元素之前，请确保该元素存在

如果脚本在元素出现在源代码中之后运行，则该表单确实存在：

<form id="idForm">...
<script>
    $("#idForm")...
</script>

将jQuery代码放入文档就绪处理程序中

如果js位于就绪处理程序中：

<script>
    $(function() {
        $("#idForm")...
    });
</script>
<form id="idForm">...

脚本标签在哪里都没有关系，因为dom在运行时已经完成了加载。

将所有js放在页面末尾

如果系统地将javascript放在页面末尾：

<body>
    <form id="idForm">...
    ...
    <script src="//ajax.googleapis.c...
    <script>
        $("#idForm")...
    </script>
</body>

那将遵循既定的最佳实践，避免此类问题，不需要在任何js代码中使用就绪处理程序（因为以这种方式解析脚本时html源始终在dom中），并且具有可以感知到的页面加载速度更快。

2020-07-26