Question

我正在弄脏表格，所以请耐心等待。我有一个基本的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>

Answer 1

如果您使用jQuery，正如@Michael建议的那样，我也建议使用jQuery，这是一个非常棒的教程：http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

本质上有3个部分：

1）HTML表格

2）Javascript / jQuery

处理表单提交事件。您可以在此处进行客户端验证，如果满意，请通过AJAX将表单提交到您的php脚本进行处理。

3）PHP脚本

处理表单的服务器端处理。将数据返回给您的javascript，以便您可以继续处理并从那里做任何您需要做的事情。

Answer 2

这是您需要开始学习AJAX的地方。它的目的完全是你正在做的事情。它代表异步Javascript和XML。

Answer 3

你可以采取两种方式：

1。）查看一些JavaScript，它可以为您完成工作，最有可能是AJAX，通过jQuery或Dojo，或者，如果您是受虐狂，则可以手工完成。

2。）在页面的某个位置iframe并使您的表单target成为iframe - 这可能是带有表单的页面的一部分 - 因此页面的最大部分将是静止不动，而表格被“谢谢你”的信息取代。

Answer 4

你可能想开始进入AJAX。

http://www.smashingmagazine.com/2008/10/16/50-excellent-ajax-tutorials/

http://en.wikipedia.org/wiki/AJAX

Answer 5

你必须使用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
        }
    });
});

没有页面刷新的表单反馈

5 个答案: