首頁>Web>source

我寫了一个wordpress插件,该插件在後編輯頁面的一个metabox中放置了几个按钮.我会去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);

這两个自定義元素均顯示在metabox中.我有一个用於提交按钮的自定義元素:

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( "[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();
        }

在建立metabox時,我有:

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))發送到遠端站點.現在,我仅收到"錯誤請求",响應為0。我没有从与遠端服務器通訊的javascript或php的錯誤日志中获取

最新回復
  • 11月前
    1 #

    在您的PHP中呼叫 遠端服務器,您可能希望在此處查看wordpress中可用的http和API函式:https://developer.wordpress.org/plugins/http-api/

    例如,這是一種从遠端服務器获取資料的簡便方法:

    $response = wp_remote_get( 'https://api.github.com/users/blobaugh' );
    $http_code = wp_remote_retrieve_response_code( $response );
    

    這是一種發佈方式,就像您提交表單一樣:

    $body = array(
        'sendThisValue'    => 'value',
    );
    $args = array(
        'body'        => $body,
    // see docs for rest of parameters here
    );
    $response = wp_remote_post( 'http://your-contact-form.com', $args );
    

  • drupal:如何以程式設計方式清除塊快取
  • wordpress:為什麼一个函式接受引數却無法在ajax呼叫中失败?