How can I get my Wordpress plugin to receive data and relay it in an ajax/php request to a remote server that requires authentication?

Question

I have written a Wordpress plugin which places several buttons inside a metabox on the post-edit page. I'd go to example.com/wp-admin/post.php?post=number1&action=edit. I want my Wordpress hook to receive an AJAX call, and in turn makes a request to a remote server (one which requires authentication that the WP user shouldn't have to enter), then returns the result to the Wordpress user.

My code for the form with the data I want to send is two custom HTML elements' entered data. They are:

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

and

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

Both of these custom elements show up in the metabox. I have a custom element for the submit button:

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)

I want to grab the data one enters in both, and submit it to an external site that normally requires a password and username to login to from outside Wordpress. I want to submit it as JSon. How can I do this with Ajax and php?

My php so far is:

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

        }

in the creation of the metabox, I have:

add_action( 'admin_enqueue_scripts', 'my_enqueue' ); add_action( 'wp_ajax_CBAjax', 'CBAjax' );

This is how I proxy the data from the button to the admin-ajax.php page:

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

and from there, it goes to 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};

I want to send that data, exp (a Json) to the remote site.

Answer 1

You will need to trigger an ajax request, for example when button click, to your ajax handler.

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

Simply log something in your ajax handler to see if a request is sent after click the button. This is to verify your ajax handler is reachable.