WordPress自定義插件按鈕onclick調用php函數

Question

我的插件顯示2個輸入字段和一個按鈕，無論您將占位符放在WP中的什么位置。 單擊按鈕后，它將調用一個js函數，該函數應使用AJAX啟動php函數，但我卻以某種方式收到錯誤消息：“未定義參考錯誤myAjax”

WSN-plugin.php

function wpb_new_company(){
    echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
    echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
    echo '<button onclick="myAjax();" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';
}

script.js（處理所有事件）

function myAjax() {
    alert("myAjax gestartet");
      $.ajax({
           type: "POST",
           url: 'localhost/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',
           data:{action:'call_this'},
           success:function(html) {
             alert(html);
           }

      });
      alert("myAjax ausgeführt");
 }

再次wsn-plugin.php然后應該運行一些功能

if($_POST['action'] == 'call_this') {
    echo "i reached it";
}

變

function wpb_adding_scripts() {
wp_register_script('wsn_script', plugins_url('script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('wsn_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

和js腳本：

function myAjax() {
    alert("myAjax gestartet");
      $.ajax({
           type: "POST",
           url: '/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',
           data:{action:'call_this'},
           success:function(html) {
             alert(html);
           }

      });
      alert("myAjax ausgeführt");
 }

沒有鑲邊顯示錯誤消息：本地主機說
在wsn-plugin.php中對未定義函數add_action（）的致命錯誤未捕獲的錯誤調用：16

Answer 1

聽起來您沒有使用wp_register_script（）和wp_enqueue_script（）從插件加載javascript文件。

編輯：這里還有其他問題，但是我忽略了它們，因為它們不是導致您出錯的原因。 您將要閱讀https://codex.wordpress.org/AJAX_in_Plugins，並特別注意“單獨的JavaScript文件”部分。 這樣可以使您將數據發送到正確的URL並能夠對其進行處理。

Answer 2

只是為了完成我為達到目標所要做的。 我在代碼行前面添加了一些注釋。 但是我不確定他們是否正確，但是目前他們至少幫助我更好地理解了這一點。

    my plugin php file:

    //reference to the backend ajax framework   
    add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
    function ajax_test_enqueue_scripts() {
        wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array('jquery'), '1.0', true );
        wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }

    // to reference the ajax call to this function
    add_action( 'wp_ajax_nopriv_call_this', 'new_company_variable_transfer' );
    function new_company_variable_transfer() {
        echo 'Did we get here?';
        wp_die();
    }

 result div
    function wpb_new_company(){
        echo '<input type="text" class="form-control" id="companyName" placeholder="Firmenname">';
        echo '<input type="text" class="form-control" id="companyYear" placeholder="Jahr">';
        echo '<button onclick="callAjax()" id="btnNewCompany" type="submit" class="btn btn-primary">Erstellen</button>';

        echo '<div id="result">Hier steht das resultat</div>';
    }
    //to be able to put it on any page with the shortcode [new_company]
    add_shortcode('new_company', 'wpb_new_company');

以及腳本文件中的簡單ajax調用

    function callAjax(){
        $.ajax({
            type: "POST",
            url: ajax_object.ajax_url,
            data:{action:'call_this'},
            success:function(response) {
            alert(response);
            $("#result").html(response);
            }
        });
    }

並以可視化的方式向您展示步驟圖片

不幸的是，由於堆棧溢出代碼更正，我無法在此處發布圖片...

最后，您可以看到它將文本更改為我們從php文件獲取的變量