Question

我的插件显示了2个输入字段和一个按钮，无论您将占位符放在WP中。单击按钮后，它调用一个js函数，它应该使用AJAX启动一个php函数，但不知怎的，我得到错误信息：＆＃34;引用错误myAjax未定义＆＃34;

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

没有chrome显示错误消息： localhost说sha致命错误未被捕获错误调用未定义函数add_action（）在wsn-plugin.php：16

Answer 1

听起来你没有使用wp_register_script（）和wp_enqueue_script（）从你的插件加载你的javascript文件。

编辑：这里还有其他问题，但我忽略了它们，因为它们不是你得到错误的原因。您需要阅读https://codex.wordpress.org/AJAX_in_Plugins并特别注意＆＃34;单独的JavaScript文件＆＃34;部分。这应该让您将数据发送到正确的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文件中获取的变量

WordPress Custom Plugin按钮onclick调用php函数

2 个答案: