Wie kann ich mein WordPress-Plugin dazu bringen, Daten zu empfangen und sie in einer Ajax/PHP-Anforderung an einen Remote-Server weiterzuleiten, der eine Authentifizierung erfordert?

Lesezeit: 6 Minuten

Benutzer-Avatar
AviG

Ich habe ein WordPress-Plugin geschrieben, das mehrere Schaltflächen in einer Metabox auf der Post-Edit-Seite platziert. Ich würde zu example.com/wp-admin/post.php?post=number1&action=edit gehen. Ich möchte, dass mein WordPress-Hook einen AJAX-Aufruf empfängt und wiederum eine Anfrage an einen Remote-Server stellt (einer, der eine Authentifizierung erfordert, die der WP-Benutzer nicht eingeben muss) und das Ergebnis dann an den WordPress-Benutzer zurückgibt.

Mein Code für das Formular mit den Daten, die ich senden möchte, besteht aus den eingegebenen Daten von zwei benutzerdefinierten HTML-Elementen. Sie sind:

class MyFormData extends HTMLElement{
    
    constructor() {
      super();      
    }

    connectedCallback(){
      const li = document.createElement('li');

      const newDat = document.createElement('input');
      newDat.setAttribute('type','text');
      newDat.setAttribute('name',`title box`);
      newDat.setAttribute('placeholder',`Test Data`);

      const deleteButton = document.createElement('button');
      deleteButton.setAttribute('type','button');
      deleteButton.innerHTML = "-";
      deleteButton.addEventListener("click",function(){
        li.parentNode.remove();
      });

      li.appendChild(newDat);
      li.appendChild(deleteButton);

      this.appendChild(li);
    }
  }
customElements.define('form-data',MyFormData);

und

class DurationMenu extends HTMLElement{
    
    constructor(){
        super();
    }

    connectedCallback(){
        const amount = document.createElement('input');
        amount.setAttribute('id','selectedTime');
        amount.setAttribute('type','number');
        amount.setAttribute('step',5)
        amount.setAttribute('name','duration');
        amount.setAttribute('min',5);
        amount.setAttribute('max',60);
        amount.setAttribute('value',15);
        this.appendChild(amount)
    }


}
customElements.define('duration-choice', DurationMenu);

Diese beiden benutzerdefinierten Elemente werden in der Metabox angezeigt. Ich habe ein benutzerdefiniertes Element für die Schaltfläche „Senden“:

import ModelObject from './model/modelobject.js'

var theJson;
var data;

import {CO} from './Controller/controllerobject.js';

export var c = new ModelObject();
import {grabDataForSending} from './Controller/wordpressrelay.js';

export class SubmitAndCreate extends HTMLElement{
    
    constructor(){
        super();            
    }

    connectedCallback(){
        var data;
        const submitbutton = document.createElement('button');
        submitbutton.setAttribute('type','submit');
        submitbutton.setAttribute('id','submitButton');
        submitbutton.innerHTML = "Begin ";

        submitbutton.addEventListener('click',this.myFunc.bind(this));

        submitbutton.addEventListener('click',()=>{
            document.getElementById('selectedTime').value = 15;
            var dataset = document.getElementById("dataset").children;
            for(var i = 0; i < dataset.length; i++){
                document.getElementById("dataset").children[i].children[0].childNodes[0].value="";    
            }

        });
        submitbutton.addEventListener('click',(event)=>{
            CO.updateModelData();
            event.preventDefault();
        })

        submitbutton.addEventListener('click',(event)=>{
            grabExperimentForSending();
        })


        this.appendChild(submitbutton);
    }

    gatherData(){
        
        //var enteredURL = document.getElementsByName('URL box')[0].value;
        var dataAmount = document.getElementById('dataset').children.length;
        var experTime = document.getElementById('selectedTime').value;

        var dataObject = {
            experimentDuration : experTime,
            myData: {}
        }

        var individualDatum = [];

        for (var i = 0; i < dataAmount; i++){
            individualDatum[i] = {
                dataset: document.getElementById("dataset").children[i].children[0].childNodes[0].value
            }
        }

        dataObject.myData = individualDatum;
        var dataObjectJSON = JSON.stringify(dataObject,null,2);
        theJson = dataObjectJSON;

        

        return theJson;
    }

}
export {theJson, CO};
customElements.define('submit-button', SubmitAndCreate)

Ich möchte die Daten, die man in beide eingibt, abrufen und an eine externe Site senden, die normalerweise ein Passwort und einen Benutzernamen erfordert, um sich von außerhalb von WordPress anzumelden. Ich möchte es als JSon einreichen. Wie kann ich das mit Ajax und PHP machen?

Meine php ist bisher:

//for admin-ajax
    add_action( 'admin_enqueue_scripts', 'my_enqueue' );
    function my_enqueue($hook) {
        if( 'index.php' != $hook ) {
            return;
        }
            
        wp_enqueue_script( 'ajax-script', plugins_url( '/wp-content/plugins/my-plugin/js/Controller/ajaxdata.js', __FILE__ ), array('jquery') );
        wp_localize_script( 'ajax-script', 'ajax_object',
                array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'c' => c ) ); //c has the data that I need to send to the remote site's server
    }


    //relevant to admin-ajax
    add_action( 'wp_ajax_CBAjax', 'CBAjax' ); 
    
    //relevant to admin-ajax
    function CBAjax() {

        error_log(print_r($_REQUEST));
         
         if ( isset($_REQUEST) ) {

             $exper = $_REQUEST['experdata'];

             error_log(print_r($exper,true));

             
             echo "The exper is " . $exper;

         }

         
         $body = array(
             'dur'    => $exper['experimentDuration'],
             'buckets'=> $experdata['myData']
         );


         $response = wp_remote_post( $url = "https://subdomain.example.com:8080/api/v1/data", array(
             'body'    => $body,
             'headers' => array(
                 'Authorization' => 'Basic ' . base64_encode( "[email protected]" . ':' . "password!" ),
             ),
         ) );

         if($response){
            error_log(print_r($response,true));
            error_log("PING");

         }

         $respcode = wp_remote_retrieve_response_code($response);
         error_log(print_r($respcode,true));
         $ajax['remote_code'] = $response['response']['code'];
         echo json_encode( $ajax );
         error_log(print_r($ajax,true));

        wp_die();

        }

Bei der Erstellung der Metabox habe ich:

add_action( ‘admin_enqueue_scripts’, ‘my_enqueue’ ); add_action( ‘wp_ajax_CBAjax’, ‘CBAjax’ );

So übertrage ich die Daten von der Schaltfläche auf die Seite admin-ajax.php:

import {c} from '../submitbutton.js';


function grabExperimentForSending(){
    

    $.ajax({
           url: "admin-ajax.php",
           type: "POST",
           data: c ,
           success: function (response, statusCode) {
                console.log(c.exps[0]);
                console.log(`statusCode is ${statusCode}`);
                console.log(`data is ${data}`);
           },
           error: function(jqXHR, textStatus, errorThrown) {
              console.log(`jqXHR is ${jqXHR}, textStatus is ${textStatus}, errorThrown is ${errorThrown}`);
              console.log(c.exps[0]);
           }
       });
}

und von dort geht es zu ajaxdata.js

import {c} from './wordpressrelay.js';

function my_action_javascript(){
    
    $('#submitButton').click( function(){
    var data = { //model
        'action': 'CBAjax',

        'experdata': ajax_object.c
    }



    jQuery.post(ajax_object.ajax_url, data, function(response) { 
        console.log('Got this from the server: ' + response);
        console.log(data.experdata);
        console.log(`data[experdata] is ${data['experdata']}`);
    });
});

}

export {my_action_javascript,c};

export {grabExperimentForSending,c};

Ich möchte diese Daten exp (ein Json) an die Remote-Site senden.

  • Was genau ist Ihr Problem? Wie ich sehe, stellt cbAjax bereits eine Anfrage an die Remote-Site?

    – HW Siew

    19. Juni 2020 um 1:44 Uhr

  • @HWSiew Ich sehe im Fehlerprotokoll keine Serverantwortcodes oder ähnliches. Ich weiß nicht, ob ich überhaupt irgendwelche Daten sende.

    – AviG

    19. Juni 2020 um 7:52 Uhr

  • Wie stellen Sie Ihre Ajax-Anfrage?

    – HW Siew

    19. Juni 2020 um 8:01 Uhr

  • @HWSiew mache ich die Anfrage nicht mit meinem Haken und meinen Rückrufen? Ich habe versucht, dies zu befolgen: codex.wordpress.org/…

    – AviG

    19. Juni 2020 um 12:57 Uhr


  • Nein, Sie müssen eine Post-Anforderung auslösen, wenn auf eine Schaltfläche geklickt wird oder ein anderes Ereignis auftritt. Überprüfen Sie den Abschnitt „Separate JavaScript-Datei“ in Ihrem angehängten Link, um zu sehen, wie Sie eine JQuery-Ajax-Anfrage stellen

    – HW Siew

    19. Juni 2020 um 16:25 Uhr

Sie müssen eine Ajax-Anforderung an Ihren Ajax-Handler auslösen, beispielsweise wenn Sie auf eine Schaltfläche klicken.

$('#my-submit-button').click(function(){
    var data = {
       'action': 'cbAjax',
       'experdata': c.exps[0]
    };

    // from php generate your ajaxurl from admin_url( 'admin-ajax.php' );
    jQuery.post(ajaxurl, data, function(response) {
       // ajax response if any
    });
});

Melden Sie einfach etwas in Ihrem Ajax-Handler an, um zu sehen, ob eine Anfrage gesendet wird, nachdem Sie auf die Schaltfläche geklickt haben. Dies dient dazu, zu überprüfen, ob Ihr Ajax-Handler erreichbar ist.

  • Also habe ich ein paar Änderungen vorgenommen, nämlich den Wert von c.exps zugewiesen[0] zu var exp und dann exp in ajaxdata.js importiert, wo ich Code wie Ihren habe. Wie bekomme ich das dann in php? Ab sofort habe ich versucht und bekommen local binding for export 'exp' not found

    – AviG

    24. Juni 2020 um 15:28 Uhr

  • Können Sie Ihre Frage aktualisieren. Es ist nicht klar, so zu schreiben.

    – HW Siew

    25. Juni 2020 um 1:38 Uhr

  • Ich werde meine Frage aktualisieren, obwohl ich die von mir versuchte Umbenennung der Variablen rückgängig gemacht habe

    – AviG

    25. Juni 2020 um 13:20 Uhr

  • Ich habe den betreffenden Code aktualisiert. Selbst wenn es jetzt so ist, bekomme ich nichts im Fehlerprotokoll und 400-Fehler in Admin-Ajax, ich glaube nicht, dass irgendetwas an den Remote-Server geht.

    – AviG

    25. Juni 2020 um 13:48 Uhr

  • Irgendeine Fehlermeldung zusammen mit der 400? Überprüfen Sie das Devtool, um es zu inspizieren

    – HW Siew

    25. Juni 2020 um 15:56 Uhr

1344490cookie-checkWie kann ich mein WordPress-Plugin dazu bringen, Daten zu empfangen und sie in einer Ajax/PHP-Anforderung an einen Remote-Server weiterzuleiten, der eine Authentifizierung erfordert?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy