从php和jquery发送电子邮件_Php_Jquery_Ajax

从php和jquery发送电子邮件

php jquery ajax

从php和jquery发送电子邮件,php,jquery,ajax,Php,Jquery,Ajax,我正在尝试使用jquery和php发送电子邮件我的html代码是 <form id="contactform"> <table border="0" cellpadding="0" cellspacing="0" width="186"> <tbody> <tr> <td bgcolor="#2A677E" width="

我正在尝试使用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>


$（文档）.ready（函数（）{
var验证程序=$（“#contactform”）。验证({
submitHandler:function（）{
$（'div.sending'）.fadeIn（'slow'）；
变量a=；
var email=$（'#email'）.attr（'value'）；
$.ajax({
类型：“POST”，
url:“发送页面”\u friend.php“，
数据：“a=“+a+”&email=“+email，
成功：函数（html）{
如果（html==1）{
$（'div.saving'）.hide（）；
$（'div.success'）.fadeIn（）；
setTimeout（函数（）{
$（'div.success'）.fadeOut（'slow'）；
}, 3000);
}
如果（html==2）{
$（'div.saving'）.hide（）；
$（'div.nosuccess'）.fadeIn（）；
setTimeout（函数（）{
$（'div.nosuccess'）.fadeOut（'slow'）；
}, 3000);
}
}
});
}
});
});

但我得到的错误是，一旦按下submit按钮，我就会进入同一页面，查询字符串如下

/？email=..

它没有调用php页面，也没有隐藏div

谢谢

您正在定义一个不带引号的变量。应该是这样，但可能需要某种更可靠的逃避：

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

var a=''；

您正在定义一个不带引号的

变量。应该是这样，但可能需要某种更可靠的逃避：
var a     = '<?php echo $_SERVER["HTTP_HOST"].$_SERVER["PHP_SELF"]; ?>';

var a=''；
我可以向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>


.t{宽度：185px；背景色：#2A677E；}
.t div{padding:3px；}
.b{左边距：100px；}
div.h{填充顶部：14px；}
#电子邮件{宽度：100%；}
.消息{显示：无；宽度：175px；字体大小：12px；填充：5px；文本对齐：居中；左边距：-25px；边距顶部：0px；位置：绝对；}
.saving，.success{背景色：#D1F4DA；边框：1px实心#017F1F；}
.nosuccess{背景色：ffebe8；边框：1px实心#dd3c10；}

javascript（jQuery 1.7+）：

$（文档）.ready（函数（）{
//错误响应的辅助函数
var失败=函数（）{
$（'div.nosuccess'）.fadeIn（）；
setTimeout（函数（）{
$（'div.nosuccess'）.fadeOut（'slow'）；
}, 3000);
}
$（'div.saving'）.ajaxStart（函数（）{
$（'#send'）.attr（“禁用”、“禁用”）；
$（this.show（）；
});
$（'div.saving'）.ajaxStop（函数（）{
$（this.hide（）；
$（“#发送”）.removeAttr（“禁用”）；
});
$（“#发送”）。单击（函数（）{
//var验证程序=$（“#contactform”）。验证({
var$ajax=$.ajax({
url:“发送页面”\u friend.php“，
数据：{
“a”：“http://”，
“电子邮件”：$（'#email'）.attr（'value'））
},
类型：“POST”，
缓存：false
});
$ajax.done（函数（r）{
如果（r=='1'）{
$（'div.success'）.fadeIn（）；
setTimeout（函数（）{
$（'div.success'）.fadeOut（'slow'）；
}, 3000);
}否则{
失败（）；
}
});
$ajax.fail（函数（r）{
失败（）；
});
返回false；
});
});

一个好的做法是本地化$.ajax（）
，并使用最新的函数.done（）
、.fail（）
和。始终（）
，这是jQuery页面上建议的，因为.success（）、.error（）和.complete（）计划在1.8中弃用+
我不确定为什么要使用var validator=$（“#contactform”）。请以这种方式验证（{…
），因此出于测试目的，我将$（'#send'）。单击（函数（）{…

快乐的编码！
我可以建议我一个更干净的解决方案。你的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>


.t{宽度：185px；背景色：#2A677E；}
.t div{padding:3px；}
.b{左边距：100px；}
div.h{填充顶部：14px；}
#电子邮件{宽度：100%；}
.消息{显示：无；宽度：175px；字体大小：12px；填充：5px；文本对齐：居中；左边距：-25px；边距顶部：0px；位置：绝对；}
.saving，.success{背景色：#D1F4DA；边框：1px实心#017F1F；}
.nosuccess{背景色：ffebe8；边框：1px实心#dd3c10；}

javascript（jQuery 1.7+）：

$（文档）.ready（函数（）{
//错误响应的辅助函数
var失败=函数（）{
$（'div.nosuccess'）.fadeIn（）；
塞特梅欧