个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
32
4
我使用提交按钮在 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>
那将是在 established best practices 之后，避免此类问题，不需要在任何 js 代码中使用现成的处理程序(因为当以这种方式解析脚本时，html 源总是已经在 dom 中)并且页面被认为加载速度更快。
关于javascript - 如何在不刷新页面的情况下发送表单数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23488309/
32
4
0
我是一名优秀的程序员,十分优秀！