Verwenden von Ajax in WordPress zum Senden von E-Mails

Ich versuche, Ajax zu verwenden, um eine E-Mail über ein von mir erstelltes Webformular zu senden, aber ich bin verloren. Ich habe keine Ahnung, wie Ajax in WordPress funktioniert.

Ich habe zuerst eine Aktion erstellt

add_action( 'wp_ajax_siteWideMessage', 'wpse_sendmail' );

Die Funktion, die die Daten abrufen und die E-Mail senden soll, lautet:

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( "[email protected]", "(OTN) Support: ".$support, $message, $headers); 
}

Schließlich ist das js so:

$("#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");
    });
});

Ich bin mir nicht sicher, was ich hier vermisse. Kann mir jemand helfen, den Ajax-Prozess von WordPress zu verstehen?

AKTUALISIEREN

Ich habe meinen Code bisher so aktualisiert:

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( "[email protected]", "(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 antwortet immer noch nicht auf meinen AJAX-Befehl. Ich verwende das Inspect-Element und sehe keine Daten, die herumgereicht werden.

Zuerst müssen Sie zwei Aktionen hinzufügen, eine für den nicht angemeldeten Benutzer, die ausdrücklich erforderlich ist, damit es funktioniert, zum Beispiel so etwas (Grundsätzlich in Ihrer functions.php Datei):

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

Dann müssen Sie die Anfrage an die stellen admin-ajax.php also im jQuery Funktion können Sie so etwas verwenden:

$("#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);
    });

});

Stellen Sie sicher, dass Sie setzen exit/die am Ende deines handler Serverseitig zum Beispiel:

function wpse_sendmail()
{
    // Process the post data...
    
    if(wp_mail(...)) {
        echo 'success';
    }
    else {
        echo 'failed';
    }

    die();
}

In deiner success Rückruf, der response Variable erhält die von der Serverseite gesendete Antwort, dh success/failed. Es gibt bessere Möglichkeiten, dies zu tun (Using wp_localize_script etc). Lesen diesen ausführlichen Artikel. Auch wenn Sie a zurückgeben möchten json Antwort dann können Sie verwenden $.json('url', data, func).

Wenn Sie verwirrt sind, lassen Sie mich Ihnen sagen, dass Sie die Anfrage stellen sollten admin-ajax.php und passieren die action mit der Anfrage und in diesem Fall ist es siteWideMessageAlso WordPress werde die anrufen handler das ist mit registriert add_action Haken und in Ihrem Fall ist es wpse_sendmail.Eid Mubarak 🙂

Ich musste etwas anders machen, damit das funktioniert.

Zuerst habe ich eine versteckte Eingabe auf meiner Vorlagenseite hinzugefügt und ihr den Wert der Ajax-URL wie folgt gegeben:

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

Dann hatte ich das in meiner functions.php

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

function wpse_sendmail() {
  echo "hewwo world";

  die();
}

Und meine js in einer separaten js-Datei als solche:

$("#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)
  });

});

Das funktioniert für mich.

Ein Blick in die Dokumentation für wp_ajax_(aktion)es sieht so aus, als müssten Sie einfach die festlegen action Parameter zu “siteWideMessage”. Zum Beispiel…

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

Sie können dies auf WordPress-Weise tun, oder Sie können dies auf einfache Weise tun. Ich würde ein Plugin erstellen, um AJAX-Handling-Code zu speichern.

<?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.";
}

Dann können Sie eine normale Post-Anfrage senden.

$.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.
});

So “sollten” Sie es definitiv nicht machen, aber ich habe festgestellt, dass es viel einfacher ist, damit zu arbeiten. Der kritische Teil ist, dass das Untermenü nicht weiß, ob es als Antwort auf eine AJAX-Anforderung oder eine normale Seitenanforderung „Dies ist die Antwort auf Ihre AJAX-Anfrage“ ausgibt. Tatsächlich könnten Sie Ihren Browser darauf verweisen "/wp-admin/admin.php?page=ajax_receiver" und Sie würden einfach “Dies ist die Antwort auf Ihre AJAX-Anfrage” in nicht formatiertem Text oben auf Ihrem Bildschirm sehen.