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