Question

我正在尝试使用Ajax通过我创建的网络表单发送电子邮件，但我迷路了。我不知道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流程吗？

更新

我到目前为止更新了我的代码：

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命令。我正在使用inspect元素，我看不到任何数据被传递。

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提出请求并将action与请求一起传递，在这种情况下，它是siteWideMessage，所以{ {1}}会拨打使用WordPress挂钩注册的handler，并在您的情况下使用add_action .Eid Mubarak： - ）

Answer 2

我必须做一些不同的事情才能让它发挥作用。

首先，我在模板页面上添加了一个隐藏的输入，并为其提供了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)
  });

});

这对我有用。

Answer 3

查看wp_ajax_(action)的文档，您只需要将action参数设置为＆＃34; siteWideMessage＆＃34; 。例如......

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

Answer 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( "/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请求的响应”。

在Wordpress中使用Ajax发送邮件

4 个答案: