如何在Wordpress中使用我的AJAX电子邮件

Question

下午好，

我有一个非常令人沮丧的问题。 我目前正在尝试使用AJAX功能从我的Wordpress网站的联系表单中发送电子邮件。 它只会在没有填写任何字段时发送电子邮件，但从我尝试在表单字段中提交数据的那一刻起，电子邮件就不会发送。

另外，由于某些原因，当我从Wordpress环境外部运行它时，它似乎工作，但从我将它包含在wordpress模板文件中的那一刻起，问题就开始发生了。

这是我的代码如下。 原谅目前没有任何错误或垃圾邮件处理的事实：

这是Javascript：

        $(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this),
            formData = form.serialize(),
            formUrl = form.attr('action'),
            formMethod = form.attr('method'),
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200)
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data),
                        klass = '';

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            })


            return false;
        })
    })

这是PHP

    if (isset($_GET['action'])) {

    if($_GET['action'] == 'email') {
        $name = $_POST['name'];
        $email = mysql_real_escape_string($_POST['email']);
        $message = $_POST['message'];

        $m1 = "Name of customer: " . $name . "\n";
        $m2 = "Customer's Email: " . $email . "\n";
        $m3 = "Message: " . $message;
        $emailmessage = $m1 . $m2 . $m3;

        mail('seedorf@me.com', 'Message from LUNASKYMODA.CO.UK contact page', $emailmessage);

        $data = array(  
                'status' => $status,  
                'message' => $message  
            );

        echo json_encode($data);

    exit;
    }
}

有问题的网页是http://lunaskymoda.co.uk/contact-us/

Ps，如果它说“发送消息”并不一定意味着它发送..仍然在努力。

Answer 1

好的，你有很多不同的东西在继续。 首先，这是jQuery代码（一个javascript库），你的代码在整个地方缺少分号。 尝试这个：

$(document).ready(function(){
        $('#emailform').submit(function(){

            window.open('','',"width=500,height=150").document.write("Thank you for contacting us, we will reply you shortly. Thank you!");

            // getting all the stuff from the form
            var form = $(this);
            formData = form.serialize();
            formUrl = form.attr('action');
            formMethod = form.attr('method');
            emailresponse = $('#emailresponse');

            // loading stuff
            emailresponse.fadeOut(200, function(){
                $(this).text("Message sent")
                .fadeIn(200);
            });


            // sending stuff to the server
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data) {
                    //stuff to do when the ajax call is successful and complete

                    var responseData = $.parseJSON(data);
                    // klass = ''; <--what is this? you don't define 'klass' anywhere

                    emailresponse.fadeOut(200, function(){
                        $(this).text(responseData.message)
                        .fadeIn(200);
                    });

                }
            });


            return false;
        });
    });

其次，只要我拉起你的网站，我就会在控制台中收到此错误：

Uncaught TypeError: Object [object Object] has no method 'livequery' wp-e-commerce.js:273

因此，在您提交脚本之前，您的网站会出现javascript错误。 尝试清除所有错误，因为如果链中存在更高的错误，javascript有一种破解方式并且根本不起作用。

第三，当我提交表单时，我收到此错误：

POST http://lunaskymoda.co.uk/contact-us/?action=email 404 (Not Found)

这可能是a）因为你的JS从第二个错误或b）中断了，因为当你使用jQuery来处理表单时你仍然有html表单动作。 所以：

第四，从这个改变你的表格标签：

<form id="emailform" action="?action=email" method="post" accept-charset="utf-8" novalidate="novalidate">

以下内容：

<form id="emailform">

所有这一切都应该让你走上正轨。 当您在控制台中查找错误时，JS的故障排除变得更加容易。 在chrome中右键单击任意位置并单击“inspect element”，然后单击“console”。 在FireFox中下载'firebug'添加。 没有控制台的JS故障排除就像在黑暗中工作。

Answer 2

似乎您的联系表单的操作参数未正确放置。

检查这个参考：

http://www.wp-themix.org/wordpress/how-to-add-a-jquery-ajax-contact-form-to-wordpress/