發送電子郵件從PHP和jQuery

Question

我想發送電子郵件使用jQuery和PHP。

我的HTML代碼

<form id="contactform"> 
      <table border="0" cellpadding="0" cellspacing="0" width="186"> 
       <tbody> 
       <tr> 
        <td bgcolor="#2A677E" width="25">&nbsp;</td> 
        <td bgcolor="#2A677E" width="161">&nbsp;</td> 
       </tr> 
       <tr> 
        <td bgcolor="#2A677E">&nbsp;</td> 
        <td bgcolor="#2A677E"><img src="images/icon-email.jpg" alt="" align="left" height="17" hspace="2" width="27"><span class="text-white">Email this page</span></td> 
       </tr> 
       <tr> 

        <td bgcolor="#2A677E">&nbsp;</td> 


        <td bgcolor="#2A677E"> 
         <input name="email" onFocus="this.value=''" onMouseOver="window.status='Enter email address here and tell a friend about this site...'; return true" onMouseOut="window.status='';return true" size="22" type="text" class="button required email"> 
         <table border="0" cellpadding="0" cellspacing="0" width="80%"> 
         <tbody> 
          <tr> 
          <td align="right" height="30"><input class="button-dark" onMouseOver="window.status='Click to send an email (with this page address) to a friend! Enter email address above...'; return true" onMouseOut="window.status='';return true" value="Send" type="submit"> 


          </td> 


<div class="saving" style="background-color:#D1F4DA;border:1px solid #017F1F;display:none;width:175px; font-size:12px; padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"><img src="validate/ajax-loader.gif"/> Please Wait Processing Request </div> 
           <div class="success" style="background-color:#D1F4DA;border:1px solid #017F1F;display:none;width:175px; font-size:12px;padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"> <img src="validate/validYes.png"/> Message Sent.<br /> 
           Thanks.</div> 
           <div class="nosuccess" style="background-color:#ffebe8;border:1px solid #dd3c10;display:none;width:175px; font-size:12px;padding:5px;text-align:center; margin-left:-25px; margin-top:0px; position:absolute;"> <img src="validate/failed.png"/> Error Sending Email. </div>       


          </tr> 

         </tbody> 
        </table> 
        </form> 

我有以下的jQuery代碼。

<script src="validate/jquery.js" type="text/javascript"></script> 
<script id="demo" type="text/javascript"> 
$(document).ready(function() { 
     var validator = $("#contactform").validate({ 
     submitHandler: function() { 

     $('div.sending').fadeIn('slow'); 
     var a  = <?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>; 
     var email  = $('#email').attr('value'); 

      $.ajax({ 
      type: "POST", 
      url: "send_page_friend.php", 
      data: "a="+ a +"&email="+ email, 
      success: function(html){ 

       if (html==1){ 
       $('div.saving').hide(); 
       $('div.success').fadeIn(); 
       setTimeout(function() { 
       $('div.success').fadeOut('slow'); 

       }, 3000); 
       } 

       if (html==2){ 
       $('div.saving').hide(); 
       $('div.nosuccess').fadeIn(); 
       setTimeout(function() { 
       $('div.nosuccess').fadeOut('slow'); 

       }, 3000); 
       } 




       } 
       }); 
     } 

    }); 

}); 
</script> 

，但我得到的錯誤是，當我按下提交按鈕，我去同一個頁面的查詢字符串像/?email=....

它不是調用一個PHP頁面，也沒有隱瞞股利。

感謝

Answer 1

您正在定義a變量不帶引號。應該是這樣的，但可能需要某種更可靠的轉義：

var a  = '<?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>'; 

Answer 2

我可以建議國際海事組織一點清潔的解決方案。你的html至少是一個混亂的內聯樣式，jQuery可以更好，並在樣式表中隔離html格式。

HTML表單：

<form id="contactform" class="t"> 
    <div class="h"> 
     <img src="images/icon-email.jpg" alt="" height="17" width="27"><span class="text-white">Email this page</span> 
    </div> 
    <div> 
     <input id="email" type="text" class="button required email"> 
    </div> 
    <div> 
     <input id="send" type="submit" value="Send" class="b"> 
    </div> 

    <div class="saving message"> <img src="validate/ajax-loader.gif"/> Please Wait Processing Request </div> 
    <div class="success message"> <img src="validate/validYes.png"/> Message Sent.<br />Thanks.</div> 
    <div class="nosuccess message"> <img src="validate/failed.png"/> Error Sending Email. </div> 
</form> 

風格：

<style type="text/css"> 
.t {width:185px; background-color:#2A677E; } 
.t div { padding:3px; }  
.b {margin-left:100px;} 
div.h {padding-top:14px;} 
#email {width:100%;} 
.message {display:none; width:175px; font-size:12px; padding:5px; text-align:center; margin-left:-25px; margin-top:0px; position:absolute;} 
.saving, .success {background-color:#D1F4DA; border:1px solid #017F1F;} 
.nosuccess {background-color:#ffebe8; border:1px solid #dd3c10;} 
</style> 

的JavaScript（jQuery的1.7+）：

<script id="demo" type="text/javascript"> 
$(document).ready(function() { 

    // helper function for errorneous responses 
    var failed = function() { 
     $('div.nosuccess').fadeIn(); 
     setTimeout(function() { 
      $('div.nosuccess').fadeOut('slow'); 
     }, 3000); 
    } 

    $('div.saving').ajaxStart(function(){ 
     $('#send').attr("disabled","disabled"); 
     $(this).show(); 
    }); 

    $('div.saving').ajaxStop(function(){ 
     $(this).hide(); 
     $('#send').removeAttr("disabled"); 
    }); 

    $('#send').click(function(){ 
    //var validator = $("#contactform").validate({ 
     var $ajax = $.ajax({ 
      url: "send_page_friend.php", 
      data: { 
       "a": "http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>", 
       "email": $('#email').attr('value') 
      }, 
      type: "POST", 
      cache: false 
     }); 

     $ajax.done(function(r) { 
      if (r == '1') { 
       $('div.success').fadeIn(); 
       setTimeout(function() { 
        $('div.success').fadeOut('slow'); 
       }, 3000); 
      } else { 
       failed(); 
      } 
     }); 

     $ajax.fail(function(r) { 
      failed(); 
     }); 

     return false; 
    }); 
}); 
</script> 

一個好的做法是本地化$.ajax()並使用最新的功能.done() ，.fail()和.always()作爲推薦因爲.success（），.error（）和.complete（）計劃在1.8以上不推薦使用。

我不確定爲什麼你這樣使用var validator = $("#contactform").validate({ ...，所以出於測試目的，我把$('#send').click(function(){...

快樂編碼！