在 Wordpress 中使用 Ajax 发送邮件

Posted 2023-05-08

【中文标题】在 Wordpress 中使用 Ajax 发送邮件

【英文标题】：Using Ajax in Wordpress to send mail

【发布时间】：2014-11-29 02:20:19

【问题描述】：

我正在尝试使用 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( "[e-mail]", "(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 流程吗？

---

更新

到目前为止，我已将代码更新为：

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( "[e-mail]", "(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 命令。我正在使用检查元素，但没有看到任何数据被传递。

【问题讨论】：

应该是action: 'siteWideMessage' 而url 需要是/wp-admin/admin-ajax.php

$support 是从哪里来的

like_escape 怎么了？那是用来转义sql的

见：wordpress.stackexchange.com/questions/18845/…，然后：codex.wordpress.org/AJAX_in_Plugins

【参考方案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(wp_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 提出请求，并将action 与请求一起传递，在这种情况下它是siteWideMessage，所以WordPress 将调用@ 987654340@ 使用 add_action 钩子注册，在你的情况下它是 wpse_sendmail.Eid Mubarak :-)

【讨论】：

你把代码放在$("#contact-send").click(function()...);里面了吗

将console.log('clicked') 放在e.preventDefault() 之前的点击处理程序中，以确保它触发了处理程序并检查控制台是否有其他错误。

我想我知道问题出在哪里。它无法访问 admin-ajax.php 链接。我的 JS 在一个 JS 文件中，与我的 php 函数不在同一个文件中。

所以我做了更多的测试。该网站正在使用页面的 html 响应 console.log(response); 我不太确定这意味着什么。

HTML 得到了什么？ echo 应该是响应。

【参考方案2】：

我必须做一些稍微不同的事情才能让它工作。

首先我在我的模板页面上添加了一个隐藏的输入，并给它一个 ajax url 的值，如下所示：

<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)
  );

);

这对我有用。

【讨论】：

重新审视这个，因为这个解决方案仍然有效。应该更高。我为使其工作而采取的步骤：将 jquery 放在我的 jQuery on page 中，将 Hidden 字段放在页面上，并添加到 Functions 中，并且可以正常工作 - 与许多其他更长的 AJAX 方法不同。这可以返回您的“回声”消息，这意味着它已被解雇。 10000% 推荐。

【参考方案3】：

查看wp_ajax_(action) 的文档，您似乎只需将action 参数设置为“siteWideMessage”。比如……

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

【讨论】：

这并没有真正让我理解 Wordpress 的 AJAX 结构。

【参考方案4】：

您可以通过 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请求了。

$.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 请求的响应”。