我创建了一个HTML电子邮件联系人表单，它有一个PHP邮件处理程序。而且，我基本上想做的是替换输入表单中的文本，而不是将浏览器重定向到没有设计属性的PHP文件。你可以看到我在这里做了什么。。。
http://www.noxinnovations.com/portfolio/thecommonwealth/index.html
"点击查询"显示HTML联系表格。
有人请帮帮我，非常感谢，Aaron
实现这一点的一种方法是使用AJAX提交表单，然后在AJAX调用完成后，替换div的innerHtml（"单击以查询"）以说出您想要的内容。
如果你喜欢jQuery，Ajaxify是一个插件，它可以将几乎所有提交标准请求的表单转换为AJAX请求。
为您提供两个选项：
-
将index.html更改为index.php，以便在文件中使用php代码处理表单提交，并直接在页面上返回值。
-
使用jQuery使AJAX变得简单快捷。教自己如何使用它是一件很有趣的事。
希望这能有所帮助。我做的例子很简单，但能够支持真实网站的全部需求，这就是代码在许多文件中分离的原因。您可以根据需要对其进行修改。
运行contact.php查看示例
文件（全部在一个目录中，奇数文本长度被视为失败，仅用于测试。）：
contact.js[将文本发送到php脚本进行存储，决定结果并…]
function storeContactMessage()
{
var str = document.getElementById("contact_text").value ;
var url = "storeText.php";
var params = "text=" + (str);
request.open("POST", url, true);//use post
// http headers
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = updatePage;
request.send(params);
}////////////////////
//want status code 200
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200)
{
//split the flag from html content
var r=request.responseText.split("$$");
//on success call the success css to hide the html form
if(r[0] == '1')
afterContactCSS('contactSuccess.css');
else //otherwise call failure css to display red color error message
afterContactCSS('contactFailure.css');
document.getElementById("after_contact").innerHTML = r[1] ;
}
else{
alert("status is " + request.status);
}
}
}
function afterContactCSS(filename)
{
//LOADING CSS
var css=document.createElement("link")
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", filename);
document.getElementsByTagName('head')[0].appendChild(css);
}
function afterContactCSS(filename)
{
//LOADING CSS
var css=document.createElement("link")
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("href", filename);
document.getElementsByTagName('head')[0].appendChild(css);
}
asynchConnect.js[设置连接]
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
contact.css[默认第一次加载的css]
#after_contact
{
display:none;
}
#contact_form
{
color:blue;
}
storeText.php[将文本存储到数据库，决定结果，加载类似脚本]
<?PHP
//use this flag to inform js on failure or success
//randomization will make behaviour look like real in example
if(is_int( strlen($_POST['text'])/2 ) )
echo $flag=1;
else
echo $flag=0;
//send delimiter
echo '$$';
if($flag==1)
include 'success.php';
else
include 'failure.php';
?>
contactFailure.css[css表示失败]
#after_contact
{
display:block;
}
success.php[你可能想对成功做点什么，更改内容，显示消息等]
<div style="color:orange;">
Thank you! We will read your message soon.<br>
<a href=home.php>Now go to Home</a>
</d>
failure.php[类似于success.php]
<div style="color:red;">
We are sorry! Message was not successfully stored! Please try again!
</d>
contactSuccess.css[css表示失败]
#after_contact
{
display:block;
}
#contact_form
{
display:none;
}
contact.php
<html>
<head>
<!--Setup the HTTP Request-->
<script type='text/javascript' src='asynchConnect.js'></script>
<!--Use the HTTP Request-->
<script type='text/javascript' src='contact.js'></script>
<!--Load CSS-->
<link rel="stylesheet" type="text/css" href="contact.css" />
<title>Contact us..</title>
</head>
<body>
<!--Other html-->
Other html, menu whatever,...<br><br>
<!--This is the contact form-->
<div id="contact_form">
Contact Us:<br>
<textarea rows="8" cols="80" id="contact_text"></textarea><br>
<input type='button' onclick='storeContactMessage();' value='Send'/>
</div>
<!--This is for success-->
<div id="after_contact"></div>
<!--Other html-->
<br><br>Other html, footer whatever,...
</body>
</html>