AJAX联系表单重新加载页面但不发送电子邮件

时间：2014-01-31 06:48:20

标签： javascript php jquery ajax

嗨喜欢标题说我的代码似乎在点击发送按钮时重新加载页面但从未实际发送过电子邮件。我已经尝试并阅读了我能做的一切，没有什么能让它正常工作。我真诚地感谢你的帮助。

<!--[if lte IE 8]>
<script src="js/html5shiv.js"></script><![endif]-->

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/contact.js"></script>
<noscript>
    <link rel="stylesheet" href="css/skel-noscript.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-noscript.css" />
</noscript>


          <!-- Contact Form-->
          <div class="content style4 featured">
       <div class="container small">
       <form id="contact" form method="post">

        <div class="row half">
         <div class="6u"><input type="text" class="text" name="name" id ="name" placeholder="Name" /></div>
           <div class="6u"><input type="text" class="text" placeholder="Email" name="email" id="email"/></div>
      </div>

<div class="row half">
    <div class="12u"><textarea name="text" placeholder="Message" id="message"></textarea></div>
</div>

<div class="row">
    <div class="12u">
        <ul class="actions">
            <li><input type="submit" class="button" value="Send Message" /></li>
            <li><input type="reset" class="button alt" value="Clear Form" /></li>
   <p class="success" style="display:none">Your message has been sent successfully.</p>
            <p class="error" style="display:none">E-mail must be valid and message must   be longer than 100 characters.</p>
        </ul>
    </div>

</div>

</form>

PHP： 

<?php
    // Email Submit
    // Note: filter_var() requires PHP >= 5.2.0
    if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']) &&      filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
        // detect & prevent header injections
        $test = "/(content-type|bcc:|cc:|to:)/i";
        foreach ( $_POST as $key => $val ) {
            if (preg_match( $test, $val ))
            exit;
        }

        //send email
        mail( "test@gmail.com", "Contact Form: ".$_POST['name'], $_POST['text'], "From:" .      $_POST['email'] );
    }
?>

JS： 

$('#contact').submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

$.ajax({
    type : "POST",
    url : "mail.php",
    data : {name:name,email:email,message:message},
    cache : false,
    success : function() {              
        $("#contact").fadeOut(300);
        $("#notice").fadeIn(400);
    }
});
return false;

}）;

感谢您的时间。

6 个答案:

答案 0 :(得分：2)

假设您的电子邮件功能在AJAX部分运行良好，您需要使用event.preventDefault()

在mail.php中也注意到你有这个

if ( isset($_POST['email']) 
&& isset($_POST['name']) && 
**isset($_POST['text'])** && 
filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
}

这将失败isset($_POST['text'])，因为没有帖子元素我认为它应该是isset($_POST['message'])

此外，您的表单元素缺少ID，请将其添加为

<!-- Contact Form-->
<div class="content style4 featured">
<div class="container small">
    <form id="contact" form method="post">

    <div class="row half">
        <div class="6u"><input type="text" class="text" name="name" id ="name" placeholder="Name" /></div>
        <div class="6u"><input type="text" class="text" placeholder="Email" name="email" id="email"/></div>
    </div>

    <div class="row half">
        <div class="12u"><textarea name="text" placeholder="Message" id="message"></textarea></div>
    </div>

    <div class="row">
        <div class="12u">
            <ul class="actions">
                <li><input type="submit" class="button" value="Send Message" /></li>
                <li><input type="reset" class="button alt" value="Clear Form" /></li>
<p class="success" style="display:none">Your message has been sent successfully.</p>
                <p class="error" style="display:none">E-mail must be valid and message must be longer than 100 characters.</p>
            </ul>
        </div>

    </div>

    </form>
</div>
</div>


<script>
    $('#contact').submit(function(e) {
        e.preventDefault();
        var name = $("#name").val();
        var email = $("#email").val();
        var message = $("#message").val();
        //var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

        $.ajax({
            type : "POST",
            url : "mail.php",
            data : {name:name,email:email,message:message},
            cache : false,
            success : function() {              
                $("#contact").fadeOut(300);
                $("#notice").fadeIn(400);
            }
        });
        return false;
    });

    </script>

我刚刚测试过，它对我有用。

答案 1 :(得分：1)

你可以修改你的功能吗，我认为它根本没有被调用。

$('#contact').on('submit', function(e) {
    e.preventDefault();
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();
    //var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

    $.ajax({
        type : "POST",
        url : "mail.php",
        data : {name:name,email:email,message:message},
        cache : false,
        success : function() {              
            $("#contact").fadeOut(300);
            $("#notice").fadeIn(400);
        }
    });
    return false;
});

答案 2 :(得分：0)

你的mail（）函数是否真的可以自行运行？你可以使用该功能发送一些邮件吗？此外，PHP isset函数将采用混合参数，如此...

PHP：

if(isset( $_POST['email'], $_POST['name'], $_POST['text'], filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $rules = "/(content-type|bcc:|cc:|to:)/i";
    foreach( $_POST as $key => value ) {
        if(preg_match($rules, $value)) 
          exit;
    } //end of foreach
} //end of if

答案 3 :(得分：0)

你的提交按钮正在进行表格发布，你需要停止该按钮的默认行为，并在点击提交按钮时调用你的方法执行ajax。

http://api.jquery.com/event.preventdefault/

答案 4 :(得分：0)

在JS中，您正在通过id访问值，但是您正在给id，只是为输入标记提供id，即名称，电子邮件，消息

<div class="6u"><input type="text" class="text" name="name" id="name" placeholder="Name" /></div>
<div class="6u"><input type="text" class="text" placeholder="Email" id="email" name="email" /></div>
<div

类= “12U” ＆GT;

将dataString设为

var dataString = {name：name，email：email，message：message};

更多邮件中的标题，即

$headers = "MIME-Version: 1.0" . "\r\n";

$ headers。=“Content-type：text / html; charset = iso-8859-1”。为 “\ r \ n” 个; $ headers。='从：'。为 “\ r \ n” 个;

mail( "test@gmail.com", "Contact Form: ".$_POST['name'], $_POST['text'], "From:" .$_POST['email'] ,$headers);

答案 5 :(得分：0)

如果你在body标签关闭之前写它而不是写入头部，那就更好了。只要您点击锚标记，就会执行以上代码。所以要具体这样。 <body> <!-- just before body tags closes--><script> $('a.buttonClassName').click(function(e){e.preventDefault(); $("<div>default"+e.type+ "prevented</div>").appendTo("#log") })</script></body>

相关问题
最新问题