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

我使用提交按钮在 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";

最佳答案

js已经阻止表单提交

问题中的代码已经通过这一行阻止表单提交:

return false;

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

表单还不存在

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

$("#idForm")...

该元素还不在 dom 中。因此，提交处理程序没有附加到任何东西 - 当表单提交时，它只是一个标准的 HTTP post 请求。

要解决问题中的问题 - 请执行以下操作之一

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

如果脚本在元素出现在源代码中之后运行 - 形式确实存在:

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

那将是在 established best practices 之后，避免此类问题，不需要在任何 js 代码中使用现成的处理程序(因为当以这种方式解析脚本时，html 源总是已经在 dom 中)并且页面被认为加载速度更快。

关于javascript - 如何在不刷新页面的情况下发送表单数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23488309/