javascript 提交一个 php 表单并在不重新加载页面的情况下在 div 上显示其结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21192923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit a php form and display its result on div without reloading page
提问by rob
First of all, thank you for your kind help.
首先，感谢您的热心帮助。
I have tried almost everything I found on stackoverflow but I cannot get this to work.
我已经尝试了几乎所有我在 stackoverflow 上找到的东西，但我无法让它工作。
I created a form to send a text to the webmaster (instead of an email). So I have my index.php file
我创建了一个表单来向网站管理员发送文本（而不是电子邮件）。所以我有我的 index.php 文件
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<form id="contact-form" method="post">
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea>
</div>
<div>
<input type="submit" value="Submit" id="submit-button" name="submit" />
*indicates a required field
</div>
</form>
<div class="result"></div>
And this is my jquery
这是我的 jquery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").appendTo(response)}
});
//return false;
});
});
</script>
The script does not work. If I put action = sendtext.phpin the <form>it will work perfectly but it will take me to sendtext.php and echothe message.
该脚本不起作用。如果我 action = sendtext.php输入<form>它会完美运行，但它会带我到 sendtext.php 和echo消息。
What I want is to show the echoin the <div class="result"></div>.
我想要的是echo在<div class="result"></div>.
Again thank you for your help.
再次感谢您的帮助。
UPDATE # 1After a few comments...
更新 #1经过一些评论......
this is what I have so far...
这是我到目前为止...
<script>
$(document).ready(function(){
$('#contact-form').submit(function(e) {
e.preventDefault();
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){$(".result").append(response)}
});
//return false;
});
});
</script>
Update 2
更新 2
After reading all the comments and try different options, no success just yet! I did what @guy suggested, and it worked but I want to use formand submit.
阅读完所有评论并尝试不同的选项后，还没有成功！我按照@guy 的建议做了，它奏效了，但我想使用form和submit。
Again, I appreciate all your time you put to help me out. Thank you!
再次感谢您花时间帮助我。谢谢！
回答by Guy
The problem is that when you add sendText.php as the action, your jQuery willexecute because the form is submitted so that will work... BUTit will also take you to the page of the form's action field. What you want to do is not call submitbut just make a button instead and have the jQuery listen to a clickon that button.
问题是，当您添加 sendText.php 作为操作时，您的 jQuery将执行，因为表单已提交，因此将起作用...但它也会将您带到表单操作字段的页面。您想要做的不是调用提交，而是创建一个按钮，然后让 jQuery 监听对该按钮的点击。
Instead of:
代替：
<input type="submit" value="Submit" id="submit-button" name="submit" />
Change it to a regular button:
将其更改为常规按钮：
<button id="submit-button">Submit</button>
Then in your jQuery, change the line
然后在您的 jQuery 中，更改行
$('#contact-form').submit(function() {
to
到
$('#submit-button').click(function() {
Also, change appendTo to html and then the result should show up in your result div.
此外，将 appendTo 更改为 html，然后结果应显示在您的结果 div 中。
----EDIT----
- - 编辑 - -
This worked for me:
这对我有用：
<style>
.result{
padding: 20px;
font-size: 16px;
background-color: #ccc;
color: #fff;
}
</style>
<div id="contact-form" >
<div>
<input type="text" id="fullname" name="fullname" value="" placeholder="Name" required="required" autofocus="autofocus" autocomplete="off" />
</div>
<div>
<input type="email" id="email" name="email" value="" placeholder="[email protected]" required="required" autocomplete="off" />
</div>
<div>
<textarea id="message" name="message" value="" placeholder="20 characters max." required="required" maxlength="50" autocomplete="off" ></textarea>
</div>
<div>
<button id="submit-button">Submit</button>
*indicates a required field
</div>
</div>
<div class="result"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit-button').click(function() {
$.ajax({
type:"post",
url:"sendText.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
});
});
</script>
回答by akumapunk
Use the the preventDefault() function so that the form doesn't do the redirection on submit. After that, use append() instead of appendTo()
使用 preventDefault() 函数，以便表单在提交时不进行重定向。之后，使用 append() 而不是 appendTo()
$('#contact-form').submit(function(e) {
e.preventDefault();
$('#contact-form').submit(function(e) {
e.preventDefault();
回答by Felix
Change:
改变：
$(".result").appendTo(response)
to:
到：
$(".result").append(response)
回答by Krish R
Can you try this,
你可以试试这个吗
$(".result").html(response);
instead of
代替
$(".result").appendTo(response)
Jaavscript:
简体中文：
$(document).ready(function(){
$('#contact-form').submit(function() {
$.ajax({
type:"POST",
url:"sendtext.php",
data: $("#contact-form").serialize(),
success: function(response){
$(".result").html(response);
}
});
return false;
});
});
回答by Patrick Moore
Your appendToin success callback is backward. In your example, you are trying to append the .resultelement to the responsevariable. Should be:
您appendTo的成功回调是落后的。在您的示例中，您试图将.result元素附加到response变量。应该：
success: function(response){ response.appendTo(".result")}
success: function(response){ response.appendTo(".result")}
