php - PHP 联系表单有效，但无法正确配置 AJAX

Question

我一直使用此代码将电子邮件从网站的联系方式发送到指定的电子邮件地址：

<?php
$contact_name = $_POST['name'];
$contact_email = $_POST['email'];
$contact_subject = $_POST['subject'];
$contact_message = $_POST['message'];

if( $contact_name == true )
{
    $sender = $contact_email;
    $receiver = "siteadminaddress@myaddress.com";
    $client_ip = $_SERVER['REMOTE_ADDR'];
    $email_body = "Nome: $contact_name \nEmail: $sender \n\nOggetto: $contact_subject \n\nMessaggio: \n\n$contact_message \n\nIP: $client_ip \n\n Contact Form Of Website MyWebsite";       
    $extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();

    if( mail( $receiver, "My Site Name - $contact_subject", $email_body, $extra ) ) 
    {
        echo "success=yes";
    }
    else
    {
        echo "success=no";
    }
}
?>

现在我必须使用一个使用文件jquery.jigowatt.js来处理联系表单消息的模板，并且我必须以与 php 相同的方式配置它，但我不知道那种方式。

文件jquery.jigowatt.js：

jQuery(document).ready(function(){


    $('#contactform').submit(function(){

        var action = $(this).attr('action');

        $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            comments: $('#comments').val(),
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null) $('#contactform').slideUp('slow');

                // 2 functions added by Themes
                if(data.match('success') != null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });
                if(data.match('success') == null) $("html,body").animate({
                    scrollTop: $("#message").offset().top
                    }, 1000, function(){
                        //scroll complete function
                    });



            }
        );

        });

        return false;

    });

});

Answer 1

您可以保留您的 php 文件并通过 jquery.jigowatt.js 中的 Ajax 将数据发送给它。我没有对此进行测试，但它应该给你这个想法。您只需要在 url: 部分的 AJAX 提交中添加 php 文件的路径。

jQuery(document).ready(function(){
    $('#contactform').submit(function(){
    var action = $(this).attr('action');
    $('#submit').attr('disabled','disabled').after('<img src="contact-form/assets/ajax-loader.gif" class="loader" />');
    $("#message").slideUp(750,function() {
    $('#message').hide();      
    $.ajax({
        type:"POST",
        url: "yourPhpFileURL.php",   //put the url of your php file here
        data: $('#contactform').serialize(),
        success: function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
            $('#submit').removeAttr('disabled');
            if(data.match('success') != null) $('#contactform').slideUp('slow');

            // 2 functions added by TrueThemes
            if(data.match('success') != null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });
            if(data.match('success') == null) $("html,body").animate({
                scrollTop: $("#message").offset().top
                }, 1000, function(){
                    //scroll complete function
                });                     
        }
        });

    });

    return false;

});

});

Answer 2

您可以改用 jQuery Ajax 表单插件：

http://www.malsup.com/jquery/form/

$('#myForm').ajaxForm(function() { 
    alert("Thank you for your comment!"); 
}); 

它应该可以为您节省大量工作。