发送电子邮件后更改 Div 中的文本？

Question

我创建了一个 HTML 电子邮件联系表单，其中有一个 PHP 邮件处理程序。而且，我基本上想做的是替换输入表单中的文本，而不是浏览器重定向到没有设计属性的 PHP 文件。你可以在这里看到我所做的...

http://www.noxinnovations.com/ portfolio/thecommonwealth/index.html

“点击查询”会显示 HTML 联系表单。

有人请帮助我， 非常感谢， 亚伦

Answer 1

一种方法是使用 AJAX 提交表单，然后在 AJAX 调用完成后，替换 div 的innerHtml（“单击查询”）以说出您想要的内容。

如果您喜欢 jQuery，Ajaxify 是一个插件，它可以将几乎所有提交标准的表单变成请求到 AJAX 请求。

Answer 2

2个选项为您提供：

1. 将index.html更改为index.php，以便在文件中您可以使用PHP代码来处理表单提交，并直接在页面上返回值。< /p>

2. 使用 jQuery 使 AJAX 变得简单快捷。自学如何使用它非常有趣。

Answer 3

希望这有帮助。我所做的示例很简单，但能够支持真实站点的全部需求，这就是代码在许多文件中分开的原因。您可以根据需要修改它。

运行 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;  
}

< strong>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>