Dev*_*per 6 javascript ajax jquery
我使用提交按钮以 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";
问题中的代码已经阻止表单通过此行提交：
return false;
这意味着：问题中的 JavaScript 代码根本没有运行。
这里的问题是，当这行代码运行时：
$("#idForm")...
该元素尚未在 dom 中。因此，提交处理程序不附加任何内容 - 当表单提交时，它只是一个标准的 HTTP post 请求。
要解决问题中的问题 - 执行以下操作之一
如果脚本在元素出现在源代码中之后运行 - 表单确实存在：
<form id="idForm">...
<script>
$("#idForm")...
</script>
如果 js 位于就绪处理程序中：
<script>
$(function() {
$("#idForm")...
});
</script>
<form id="idForm">...
脚本标签在哪里并不重要，因为 dom 在运行时已经完成加载。
如果 javascript 系统地放在页面末尾：
<body>
<form id="idForm">...
...
<script src="//ajax.googleapis.c...
<script>
$("#idForm")...
</script>
</body>
这将遵循既定的最佳实践，避免此类问题，不需要在任何 js 代码中使用就绪处理程序（因为当脚本以这种方式解析时，html 源始终已经在 dom 中）并且具有被认为是加载速度更快。
| 归档时间： |
|
| 查看次数： |
7420 次 |
| 最近记录： |