如何让我的 Wordpress 插件接收数据，并在 ajax/php 请求中将其中继到需要身份验证的远程服务器?

Question

>我写了一个Wordpress插件，它将几个按钮放在编辑后页面的元框中。我会去 example.com/wp-admin/post.php?post=number1&action=edit。我希望我的 Wordpress 钩子接收 AJAX 调用，进而向远程服务器发出请求(需要 WP 用户不必输入的身份验证(，然后将结果返回给 Wordpress 用户。

我想要发送数据的表单代码是两个自定义 HTML 元素输入的数据。它们是：

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

和

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

这两个自定义元素都显示在元框中。我有一个用于提交按钮的自定义元素：

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)

我想获取一个人在两者中输入的数据，并将其提交给通常需要密码和用户名才能从Wordpress外部登录的外部站点。我想以JSon的形式提交它。如何使用 Ajax 和 php 执行此操作？

到目前为止，我的 php 是：

//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( "[e-mail]" . ':' . "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();
}

在创建元框时，我有：

add_action( 'admin_enqueue_scripts'， 'my_enqueue' (; add_action( 'wp_ajax_CBAjax'， 'CBAjax' (;

这就是我将数据从按钮代理到 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]);
}
});
}

从那里，它进入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};

我想将该数据 exp(一个 Json(发送到远程站点。

Answer 1

您需要触发 ajax 请求，例如在单击按钮时，向 ajax 处理程序发送请求。

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

只需在 ajax 处理程序中记录一些内容，即可查看单击按钮后是否发送了请求。这是为了验证您的 ajax 处理程序是否可访问。