從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 Page，也沒有隱藏div。

謝謝

Answer 1

我可以建議IMO采取更清潔的解決方案。 您的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()並使用jQuery頁面http://api.jquery.com/jQuery.ajax/上推薦的最新功能.done() .fail()和.always() ，因為計划在1.8+版本中棄用.success（）、. error（）和.complete（）

我不確定為什么要使用var validator = $("#contactform").validate({ ...這樣，因此出於測試目的，我將$('#send').click(function(){...

編碼愉快！

Answer 2

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

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