如何让我在 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/

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

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 中，只需右键单击任意位置并单击“检查元素”，然后单击“控制台”。在 FireFox 中下载“firebug”插件。在没有控制台的情况下对 JS 进行故障排除就像在黑暗中工作。

Answer 2

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

检查此参考：

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