表单反馈而无需刷新页面
[英]Form feedback without a page refresh
问题描述
我正在处理表单，因此请耐心等待。 我有一个基本的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>
和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
如果您按照@Michael的建议（我也建议这样做）使用jQuery，那么这里有个很好的教程可以做到这一点： http : //net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-页面刷新使用jQuery /
从本质上讲，它分为三个部分：
1）HTML表单
2）Javascript / jQuery
- 处理表单提交事件。 您可以在此处进行客户端验证，如果满意，请通过AJAX将表单提交到您的php脚本进行处理。
3）PHP脚本
- 处理表单的服务器端处理。 将数据返回到您的javascript，以便您可以继续进行处理并从那里进行任何需要做的事情。
解决方案2
1 2012-02-16 15:29:12
这是您开始学习AJAX的地方。 它的目的正是完成您的工作。 它代表异步Javascript和XML。
解决方案3
1 2012-02-16 15:31:23
您可以选择2种方式：
1.）研究一些JavaScript，它可以通过jQuery或Dojo为您完成工作，很可能是AJAX ，或者如果您是受虐狂，则可以手工完成。
2.）在页面的某处放置一个iframe ，并使您的表单target成为iframe-这可能是承载表单的页面的一部分-因此，页面的最大部分将保持静止，而将表单替换为“谢谢”消息。
解决方案4
1 2012-02-16 15:33:06
解决方案5
1 2012-02-16 15:34:07
您必须使用jQuery。 像这样：
$("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.