Question

我一直在努力将数据发送到我正在处理的网站上的大型工作查询表中。

快速用户故事：

作为网站所有者，我希望用户通过复选框提交数据，有些用户输入一些个人信息。单击提交按钮时，我想通过Ajax发送数据，并提交到内置AJAX功能的WordPress。这些数据需要通过电子邮件发回给我。

我在

的位置

我提交了AJAX并发送了电子邮件。我难以理解的原因是我的表单/ ajax请求中没有数据通过。

HTML

<form id="inquire" class="form" name="inquireForm">
... a crap ton of checkboxes and a few inputs for name,email etc...
</form>

的JavaScript

以下函数通过jQuery Validate库触发。有一个submitHandler方法，其中跟随调用。

function submitForm() {
    /* Keep form from submitting normally*/
    event.preventDefault();

    /* Clear success div*/
    $('.success_box').addClass('hidden').removeClass('error').html('');

    var cleanData = $('#inquire').serialize();
    var form = cleanData;

    $.ajax({
        url: myInquiry.ajaxurl,
        type: "POST",
        data: {
            action: "send_inquiry",
            form: form,
            nonce: myInquiry.nonce
        },
        dataType: 'JSON',
        success: function(data, textStatus, jqXHR) {
            console.log(' The sever responded: ', data , textStatus , jqXHR);
            if (textStatus == "success") {
                $('.success_box').removeClass('hidden').html('<p>Success! Your message has been sent. We will reach you to you in less than 24 hours.</p>');
                fadeModal();               
            } else {
                $('.success_box').removeClass('hidden').addClass('error').html('<p>Error! Your message has not been sent.</p>');
            }
        },
    });
}

的functions.php

// enqueue ajax scripts
wp_enqueue_script('ajax_script', get_template_directory_uri(). '/assets/js/dist/inquire.js', array('jquery'), null, true);
wp_localize_script( 'ajax_script', 'myInquiry', 
    array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( "send_inquiry_nonce" ),
    )
);

// add in WP actions with unique names that match
add_action( 'wp_ajax_send_inquiry', 'send_inquiry_process' );
add_action( 'wp_ajax_nopriv_send_inquiry', 'send_inquiry_process' );

// Try to send email
function send_inquiry_process() {
    $user_email = isset($_POST['email']) ? $_POST['email'] : '';
    $headers = "From: " . " $user_email" . "\r\n";
    $headers .= "Reply-to: ". $user_email . "\r\n";
    $headers .= "MIME-Version: 1.0". "\r\n";
    $headers .= "Content-Type: text/html; charset=UTF-8" . "\r\n";

    $to = "andy@example.com";
    $subject = "New Inquiry!";
    $message = "It works";
    mail($to, $subject, $message, $headers);
}

结果

到目前为止，结果是一个可靠的Ajax帖子，我收到了一封电子邮件，但例如$user_email PHP变量返回undefined。也就是说我尝试返回的表格中的所有数据都是零。

我的临时服务器在Digital Ocean上。看来PHP中的邮件方法有效，但我现在还不能100％确定它是否是服务器问题。

很高兴

我希望返回的数据可以格式化为HTML。我只需要编写一个表并包含邮件消息的变量。在此之前，我需要它的工作！我现在有UTF-8的字符集，所以我假设一切都很好。

同时

我意识到这有很大的安全漏洞。我将专注于此，但它需要首先工作。

您可以提供的任何见解都将成为我的一天！我很努力。谢谢！

Answer 1

在我发表评论时，您在ajax中的数据就像这样发送

data: {
  action: "send_inquiry",
  form: form,
  nonce: myInquiry.nonce
},

在PHP中（如果我看对了）就像这样

 $_POST = [
     'action' => "send_inquiry",
     'form'  =>  [...],
    'nonce'  => '..' /// what ever this is myInquiry.nonce
 ];

然后尝试访问$_POST['email']不起作用，你需要

   $_POST['from']['email'];

相反。为了确保你可以使用var_dump打印出post数组，但这有点难以实现-via- AJAX。但是data就是你自己＆＃34;张贴＆＃34;到后端，而不是form。

除非WordPress在幕后做了一些Mojo，否则TBH我还没有通过WordPress完成很多AJAX，所以我可能完全偏离基础。

Answer 2

<强>解决

问题在于我解析数据的方式。您无法action:方法$.ajax拨打电话。

所以改变这个：

function submitForm() {

/* Keep form from submitting normally*/
event.preventDefault();

/* Clear success div*/
$('.success_box').addClass('hidden').removeClass('error').html('');

var cleanData = $('#inquire').serialize();
var form = cleanData;


$.ajax({
    url: myInquiry.ajaxurl,
    type: "POST",
    data: {
      action: "send_inquiry",
      form: form,
      nonce: myInquiry.nonce
    },
    dataType: 'JSON',
    success: function(data, textStatus, jqXHR) {

        console.log(' The sever responded: ', data , textStatus , jqXHR);

        if (textStatus == "success") {
       $('.success_box').removeClass('hidden').html('<p>Success! Your message    has been sent. We will reach you to you in less than 24 hours.</p>');
       fadeModal();               
     } else {
        $('.success_box').removeClass('hidden').addClass('error').html('<p>Error! Your message has not been sent.</p>');
   }
   },
});

对此：

function submitForm() {

/* Keep form from submitting normally*/
event.preventDefault();

/* Clear success div*/
$('.success_box').addClass('hidden').removeClass('error').html('');

var cleanData = $('#inquire').serialize();
var data = cleanData;


$.ajax({
   url: myInquiry.ajaxurl,
   type: "POST",
   data: data + '&action=send_inquiry',
   dataType: 'JSON',
   success: function(data, textStatus, jqXHR) {
   console.log(' The sever responded: ', data , textStatus , jqXHR);
      if (textStatus == "success") {
       $('.success_box').removeClass('hidden').html('<p>Success! Your message has been sent. We will reach you to you in less than 24 hours.</p>');
      fadeModal();               
   } else {
           $('.success_box').removeClass('hidden').addClass('error').html('<p>Error! Your message has not been sent.</p>');
    } 
   },
});

诀窍。我将data变量公开更新为data（为了优先考虑），并在ajax调用中data:更新了data + &action=send_query。这使POST更新为我需要将数据发送到PHP电子邮件脚本。

如果那不清楚，请随时联系！

WordPress Ajax＆amp; PHP电子邮件问题 - 电子邮件中没有数据

2 个答案: