I have sending my data in ajax using submit button without any page refresh. But the page refreshed.
我使用提交按钮在ajax中发送数据而没有任何页面刷新。但页面刷新了。
Please check my code and let me know the problem.
请检查我的代码,让我知道问题。
<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";
4 个解决方案
#1
2
The js already prevents the form submitting
The code in the question already prevents the form from submitting by this line:
问题中的代码已阻止表单通过此行提交:
return false;
which means: The JavaScript code in the question isn't running at all.
这意味着:问题中的JavaScript代码根本没有运行。
The form doesn't exist yet
The problem here is that when this line of code runs:
这里的问题是当这行代码运行时:
$("#idForm")...
that element isn't in the dom yet. As such the submit handler isn't attached to anything - when the form submits it's just a standard HTTP post request.
那个元素还没有在dom中。因此,提交处理程序不会附加到任何内容 - 当表单提交它时,它只是一个标准的HTTP post请求。
To just fix the problem in the question - do one of the following
要解决问题中的问题 - 请执行以下操作之一
Ensure the element exists before trying to manipulate it
If the script runs after the element appears in the source code - the form does exist:
如果脚本在元素出现在源代码中后运行 - 表单确实存在:
<form id="idForm">...
<script>
$("#idForm")...
</script>
Put jquery code in a document ready handler
If the js is in a ready handler:
如果js处于就绪处理程序中:
<script>
$(function() {
$("#idForm")...
});
</script>
<form id="idForm">...
It doesn't matter where the script tag is as the dom has already finished loading when it runs.
脚本标记的位置无关紧要,因为dom在运行时已经完成加载。
Put all js at the end of the page
If javascript is systematically put allat the end of the page:
如果系统地将javascript放在页面的末尾:
<body>
<form id="idForm">...
...
<script src="//ajax.googleapis.c...
<script>
$("#idForm")...
</script>
</body>
That would be following established best practices, avoid such problems, don't need to use ready-handlers in any js code (as the html source is always already in the dom when scripts are parsed that way) and have pages that are perceived to load faster.
这将遵循既定的最佳实践,避免此类问题,不需要在任何js代码中使用现成的处理程序(因为当脚本以这种方式解析时,html源总是已经在dom中)并且具有被认为是的页面加载更快。
#2
3
//Program a custom submit function for the form
$("form#data").submit(function(event){
//disable the default form submission
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);
$.ajax({
url: 'formprocessing.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
return false;
});
#3
1
$("#idForm").submit(function(e) {
e.preventDefault();//use it here to stop default behaviour
alert("hi");
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
#4
1
I think you can use the 'preventDefault' function for this:
我认为你可以使用'preventDefault'函数:
<script>
$("#idForm").submit(function(e) { alert("hi");
e.preventDefault();
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
</script>
#1
2
The js already prevents the form submitting
The code in the question already prevents the form from submitting by this line:
问题中的代码已阻止表单通过此行提交:
return false;
which means: The JavaScript code in the question isn't running at all.
这意味着:问题中的JavaScript代码根本没有运行。
The form doesn't exist yet
The problem here is that when this line of code runs:
这里的问题是当这行代码运行时:
$("#idForm")...
that element isn't in the dom yet. As such the submit handler isn't attached to anything - when the form submits it's just a standard HTTP post request.
那个元素还没有在dom中。因此,提交处理程序不会附加到任何内容 - 当表单提交它时,它只是一个标准的HTTP post请求。
To just fix the problem in the question - do one of the following
要解决问题中的问题 - 请执行以下操作之一
Ensure the element exists before trying to manipulate it
If the script runs after the element appears in the source code - the form does exist:
如果脚本在元素出现在源代码中后运行 - 表单确实存在:
<form id="idForm">...
<script>
$("#idForm")...
</script>
Put jquery code in a document ready handler
If the js is in a ready handler:
如果js处于就绪处理程序中:
<script>
$(function() {
$("#idForm")...
});
</script>
<form id="idForm">...
It doesn't matter where the script tag is as the dom has already finished loading when it runs.
脚本标记的位置无关紧要,因为dom在运行时已经完成加载。
Put all js at the end of the page
If javascript is systematically put allat the end of the page:
如果系统地将javascript放在页面的末尾:
<body>
<form id="idForm">...
...
<script src="//ajax.googleapis.c...
<script>
$("#idForm")...
</script>
</body>
That would be following established best practices, avoid such problems, don't need to use ready-handlers in any js code (as the html source is always already in the dom when scripts are parsed that way) and have pages that are perceived to load faster.
这将遵循既定的最佳实践,避免此类问题,不需要在任何js代码中使用现成的处理程序(因为当脚本以这种方式解析时,html源总是已经在dom中)并且具有被认为是的页面加载更快。
#2
3
//Program a custom submit function for the form
$("form#data").submit(function(event){
//disable the default form submission
event.preventDefault();
//grab all form data
var formData = new FormData($(this)[0]);
$.ajax({
url: 'formprocessing.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (returndata) {
alert(returndata);
}
});
return false;
});
#3
1
$("#idForm").submit(function(e) {
e.preventDefault();//use it here to stop default behaviour
alert("hi");
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
#4
1
I think you can use the 'preventDefault' function for this:
我认为你可以使用'preventDefault'函数:
<script>
$("#idForm").submit(function(e) { alert("hi");
e.preventDefault();
var url = "ajax.php";
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(),
success: function(data) {
alert(data);
}
});
return false;
});
</script>