在Wordpress中使用Ajax发送邮件

Question

我试图使用Ajax通过我创建的Web表单发送电子邮件，但我迷路了。我不知道如何Ajax在Wordpress中的功能。

我首先创建了一个动作

add_action('wp_ajax_siteWideMessage', 'wpse_sendmail'); 

这是应该检索数据和发送邮件的功能是：

function wpse_sendmail() 
{ 
    $for = like_escape($_POST['forwhat']); 
    $email = like_escape($_POST['email']); 
    $headers = 'From: '.$email ."\r\n".'Reply-To: '.$email; 
    $message = like_escape($_POST['message_message']); 
    $respond = like_escape($_POST['message_email']); 

    wp_mail("support@ontrgt.net", "(OTN) Support: ".$support, $message, $headers); 
} 

最后，JS是像这样：

$("#contact-send").click(function(){ 
    var forwhat = $("#contact-for").val(); 
    var name = $("#contact-name").val(); 
    var email = $("#contact-email").val(); 

    $.post("<?php echo esc_js(site_url()) ?>", { siteWideMessage:"null", forwhat: forwhat, name: name, email:email }, function(){ 
      console.log("success"); 
    }); 
}); 

我不太确定我在这里错过了什么。有人能帮助我理解Wordpress的Ajax过程吗？

---

UPDATE

我我的代码更新到这个至今：

PHP

add_action('wp_ajax_siteWideMessage', 'wpse_sendmail'); 
add_action('wp_ajax_nopriv_siteWideMessage', 'wpse_sendmail'); 

function wpse_sendmail() 
{ 
    $for = $_POST['forwhat']; 
    $email = $_POST['email']; 
    $headers = 'From: '.$email ."\r\n".'Reply-To: '.$email; 
    $message = $_POST['message_message']; 
    $respond = $_POST['message_email']; 

    /*if(wp_mail("support@ontrgt.net", "(OTN) Support: ".$for, $message, $headers)) 
    { 
     echo "WOOHOO"; 
    }*/ 

    if($for) 
    { 
     //Just to see if there is any response. 
     echo "Whoohoo"; 
    } 

    die(); 
} 

的js

$("#contact-send").click(function(){ 
    var forwhat = $("#contact-for").val(); 
    var name = $("#contact-name").val(); 
    var email = $("#contact-email").val(); 

    var data = { action:'siteWideMessage', forwhat:forwhat, name:name, email:email }; 
    $.post('<?php echo admin_url("admin-ajax.php"); ?>', data, function(response) { 
     alert(response); 
    }); 
}); 

Wordpress仍然没有响应我的AJAX命令。我使用了检查元素，并且我看不到任何数据被传递。

Answer 1

首先，你需要添加两个动作，一个用于非登录用户明确要求，使其工作，例如像这样（基本上在functions.php文件）：

add_action('wp_ajax_siteWideMessage', 'wpse_sendmail'); 
add_action('wp_ajax_nopriv_siteWideMessage', 'wpse_sendmail'); 

然后，你需要做的请求admin-ajax.php所以在jQuery功能，你可以使用这样的事情：

$("#contact-send").click(function(e){ 

    e.preventDefault(); // if the clicked element is a link 

    //... 

    var data = { 'action':'siteWideMessage', 'more':'values' }; 

    $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) { 
     console.log(response); 
    }); 

}); 

确保你把exit/die你handler在服务器侧端，例如：

function wpse_sendmail() 
{ 
    // Process the post data... 

    if(mail(...)) { 
     echo 'success'; 
    } 
    else { 
     echo 'failed'; 
    } 

    die(); 
} 

在你success回调，则response变量将得到从服务器端发送的响应，即success/failed。有更好的方法来做到这一点（使用wp_localize_script等）。阅读this detailed article。另外，如果您想返回json响应，那么您可以使用$.json('url', data, func)。

如果你弄糊涂了，然后让我告诉你，你应该做的请求admin-ajax.php并与该请求，并在这种情况下，它是siteWideMessage，通过action所以WordPress会打电话给目前正使用add_action钩注册的handler和你的情况是wpse_sendmail。Eid Mubarak :-)

Answer 2

查看wp_ajax_(action)的文档，看起来您只需将action参数设置为“siteWideMessage”。例如...

$.post(<?= json_encode(admin_url('admin-ajax.php')) ?>, { 
    action: 'siteWideMessage', 
    // and the rest 
}, function(response) { 
    // handle a successful response 
}); 

Answer 3

你可以这样做wordpress的方式，或者你可以这样做的简单方法。我会制作一个插件来保存AJAX处理代码。

<?php 
/* 
Plugin Name: AJAX Receiver 
*/ 


add_action('admin_menu', 'ajax_receiver_menu'); 
function ajax_receiver_menu() { 
    $parent_slug = null; // Child of null, so this menu item has no link to it in the dashboard. 
    $menu_title = "AJAX Receiver menu"; // This menu title will not be visible. 
    $page_title = "AJAX_Receiver"; // No one will visit this page. 
    $menu_slug = 'ajax_receiver'; // This is the last part of the URL you post to. 
    $callback = 'ajax_receiver_menu_content'; 
    add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $callback); 
} 



function ajax_receiver_menu_content() { 
    // check request variables, do other logic. 
    echo "This is the response to your AJAX request."; 
} 

然后，您可以发送正常的发布请求。

$.post("/wp-admin/admin.php?page=ajax_receiver", { siteWideMessage:"null", forwhat: forwhat, name: name, email:email }, function(data){ 
     console.log(data); // You should see "This is the response to your AJAX request." in your console. 
}); 

这绝对不是你如何“应该”这样做，但我发现这很容易处理。关键部分是子菜单不知道它是否响应AJAX请求或正常页面请求而回应“这是对您的AJAX请求的响应”。事实上，您可以将您的浏览器指向"/wp-admin/admin.php?page=ajax_receiver"，您只需看到屏幕顶部的无风格文本中的“这是对您的AJAX请求的响应”。

Answer 4

我不得不做一些稍微不同的事情来实现这个目标。

首先，我添加了一个隐藏输入我的模板页面上，并给了它一个AJAX网址像这样的值：

<input type="hidden" id="ajax_url" value="<?php echo admin_url('admin-ajax.php'); ?>"/> 

然后我在functions.php中有这个

add_action('wp_ajax_siteWideMessage', 'wpse_sendmail'); 
add_action('wp_ajax_nopriv_siteWideMessage', 'wpse_sendmail'); 

function wpse_sendmail() { 
    echo "hewwo world"; 

    die(); 
} 

而且我的js在一个单独的js文件中，如下所示：

$("#submit-form").click(function(e){ 

    e.preventDefault(); // if the clicked element is a link 

    $.post($("#ajax_url").val(), { 
     action: 'siteWideMessage', 
     // and the rest 
    }, function(response) { 
     // handle a successful response 
     console.log(response) 
    }); 

}); 

这适用于我。