He escrito un complemento de Wordpress que coloca varios botones dentro de un metabox en la página de edición posterior. Iría a example.com/wp-admin/post.php?post=number1&action=edit. Quiero que mi enlace de Wordpress reciba una llamada AJAX y, a su vez, realice una solicitud a un servidor remoto (uno que requiere autenticación que el usuario de WP no debería tener que ingresar), luego devuelve el resultado al usuario de Wordpress.

Mi código para el formulario con los datos que quiero enviar son los datos ingresados de dos elementos HTML personalizados. Ellos son:

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

y

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

Ambos elementos personalizados aparecen en el metabox. Tengo un elemento personalizado para el botón de enviar:

 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)

Quiero obtener los datos que uno ingresa en ambos y enviarlos a un sitio externo que normalmente requiere una contraseña y un nombre de usuario para iniciar sesión desde fuera de Wordpress. Quiero enviarlo como JSon. ¿Cómo puedo hacer esto con Ajax y php?

Mi php hasta ahora es:

 //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( "login@example.com" . ':' . "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(); }

en la creación del metabox, tengo:

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

Así es como envío los datos del botón a la página 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]); } }); }

y de ahí va a 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};

exportar {grabExperimentForSending,c};

Quiero enviar esos datos, exp (un Json) al sitio remoto.