表单反馈而无需刷新页面
[英]Form feedback without a page refresh
问题描述
I'm getting my feet wet with form processing so bear with me. 
我正在处理表单，因此请耐心等待。 I have a basic HTML form and a script that sends mail. 我有一个基本的HTML表单和一个发送邮件的脚本。 At the moment it sends and refreshes to give feedback. 此刻，它发送并刷新以提供反馈。 What I would like is if the feedback could be given without refreshing the page. 我想要的是是否可以在不刷新页面的情况下给出反馈。
HTML 的HTML
<html>
<head>
<title>E-Mail Form</title>
</head>
<body>
<form action="beta_sendmail.php" method="POST">
<p><strong>Name: </strong><br/>
<input type="text" size="25" name="name" /></p>
<p><strong>E-Mail Address: </strong><br />
<input type="text" size="25" name="email" /></p>
<p><strong>Message: </strong><br />
<textarea name="message" cols="30" rows="5"></textarea></p>
<p><input type="submit" value="send" /></p>
</form>
</body>
</html>
and the PHP 和PHP
<html>
<head>
<title>Mail Sending Script</title>
</head>
<body>
<?php
echo "<p>Thank you, <b>".$_POST["name"]."</b>, for your message!</p>";
echo "<p>Your email address is: <b>".$_POST["email"]."</b>.</p>";
echo "<p>Your message was: <br/>";
echo $_POST["message"]."</p>";
//start building the mail string
$msg = "Name: ".$_POST["name"]."\n";
$msg .= "E-Mail: ".$_POST["email"]."\n";
$msg .= "Message: ".$_POST["message"]."\n";
//set up the mail
$recipient = "mailto@me.com";
$subject = "Form Submission Results";
$mailheaders = "From: My Web Site <defaultaddress@yourdomain.com> \n";
$mailheaders = "Reply-To: ".$_POST["email"];
//send the mail
mail($recipient, $subject, $msg, $mailheaders);
?>
</body>
</html>
5 个解决方案
解决方案1
2 已采纳 2012-02-16 15:30:27
If you use jQuery, as @Michael suggested, and which I also recommend, here is a great tutorial to do exactly that: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ 如果您按照@Michael的建议（我也建议这样做）使用jQuery，那么这里有个很好的教程可以做到这一点： http : //net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-页面刷新使用jQuery /
In essence there are 3 parts: 从本质上讲，它分为三个部分：
1) HTML Form 1）HTML表单
2) Javascript/jQuery 2）Javascript / jQuery
- Handles form submit event. 处理表单提交事件。 You can do client side validations here, and if satisfied, submit the form via AJAX to your php script for processing. 您可以在此处进行客户端验证，如果满意，请通过AJAX将表单提交到您的php脚本进行处理。
3) PHP script 3）PHP脚本
- Handles server side processing of the form. 处理表单的服务器端处理。 Returns data back to your javascript so you can continue processing and do whatever you need to do from there. 将数据返回到您的javascript，以便您可以继续进行处理并从那里进行任何需要做的事情。
解决方案2
1 2012-02-16 15:29:12
This is where you need to start learning AJAX. 这是您开始学习AJAX的地方。 Its purpose accomplishes exactly what you are doing. 它的目的正是完成您的工作。 It stands for Asynchronous Javascript And XML. 它代表异步Javascript和XML。
解决方案3
1 2012-02-16 15:31:23
You can go 2 ways: 您可以选择2种方式：
1.) to look into some JavaScript, that does the job for you, most likely AJAX , via jQuery or Dojo or, if you are a masochist, by hand. 1.）研究一些JavaScript，它可以通过jQuery或Dojo为您完成工作，很可能是AJAX ，或者如果您是受虐狂，则可以手工完成。
2.) Have an iframe somewhere in your page and make your form target be the iframe - this could be the part of the page carrying the form - so the biggest part of the page would stand still, while the form is replaced by the "thankyou" message. 2.）在页面的某处放置一个iframe ，并使您的表单target成为iframe-这可能是承载表单的页面的一部分-因此，页面的最大部分将保持静止，而将表单替换为“谢谢”消息。
解决方案4
1 2012-02-16 15:33:06
You might wanna start getting into AJAX. 您可能想开始使用AJAX。
http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/ http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/
http://en.wikipedia.org/wiki/AJAX http://en.wikipedia.org/wiki/AJAX
解决方案5
1 2012-02-16 15:34:07
You'd have to use jQuery. 您必须使用jQuery。 Something like this: 像这样：
$("form").submit(function(event){
event.preventDefault();
var dataString = 'postVariableName=' + $("postVariableValue").val() + '&postVariableName=' + $("postVariableValue").val();
//alert (dataString);return false; //to check the string being sent
$.ajax({
type: "POST",
url: "postPath.php",
data: dataString,
success: function(data) {
//create jquery object from the response html
var $response=$(data);
//query the jq object for the values
var title = $response.filter('div#title').text(); //Check the resulting post page output for a div with an ID of "title", and put it's text into a variable called "title"
var cbody = $response.filter('div#cbody').html(); //Check the resulting post page output for a div with an ID of "cbody", and put it's html into a variable called "cbody"
$("input#title").val(title); //Display the title on the page
$("div#cbody").html(cbody); //Display the cbody on the page
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.