我创建了一个 HTML 电子邮件联系表单，它在 PHP 中有一个邮件处理程序。而且，我基本上想要做的是替换输入表单中的文本，而不是将浏览器重定向到没有设计属性的 PHP 文件。你可以看到我在这里做了什么......
http://www.noxinnovations.com/portfolio/thecommonwealth/index.html
“点击查询”显示 HTML 联系表。
有人请帮助我，非常感谢，亚伦
问问题
832 次
3 回答
2
一种方法是使用 AJAX 提交您的表单，然后在您的 AJAX 调用完成后，替换您的 div 的 innerHtml（“点击查询”）以说出您想要的内容。
如果您喜欢 jQuery，Ajaxify是一个插件，它可以将几乎所有提交标准请求的表单转换为 AJAX 请求。
于 2011-06-08T01:21:48.950 回答
1
2个选项供您选择：
将 index.html 更改为 index.php，以便在文件中您可以使用 PHP 代码处理表单提交，并直接在页面上返回值。
使用 jQuery 让AJAX变得简单快捷。自学如何使用它是一种很好的乐趣。
于 2011-06-08T01:30:08.850 回答
0
希望这可以帮助。我制作的示例很简单，但能够支持真实站点的全部需求，这就是代码在许多文件中分开的原因。您可以根据需要对其进行修改。
运行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;
}
联系人.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>
于 2011-06-08T08:18:33.063 回答