WordPress Custom Plugin按钮onclick调用php函数

问题描述：

My plugin shows 2 input fields and a button wherever you put the placeholder in WP. After clicking the button it calls a js function which should start a php function using AJAX but somehow i get the error message: "reference error myAjax is not defined"

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 (which handles all the events)

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

and again wsn-plugin.php which should then run some function

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

Changed

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

and js script:

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

no chrome shows the error message: localhost says
fatal error uncaught error call to undefined function add_action() in wsn-plugin.php:16

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

wsn-plugin.php

  function wpb_new_company（）{
 echo'＆lt; input type =“text”class =“form-control”id =“companyName”placeholder =“Firmenname”＆gt;'  ; 
 echo'＆lt; input type =“text”class =“form-control”id =“companyYear”placeholder =“Jahr”＆gt;'; 
 echo'＆lt; button onclick =“myAjax（）;”  id =“btnNewCompany”type =“submit”class =“btn btn-primary”＆gt; Erstellen＆lt; / button＆gt;'; 
} 
  code>  pre> 
 
  script.js  （处理所有事件） p> 
 
 
  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（“myAjaxausgeführt”）; 
} 
  code>  pre> 
 
 再次wsn-plugin  .php应该运行一些函数 p> 
 
 
  if（$ _ POST ['action'] =='call_this'）{
 echo“我到达了它”; 
}  
  code>  pre> 
 
  已更改 strong>  p> 
 
 
  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'）; \  n  code>  pre> 
 
 和js 脚本： p> 
 
 
  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）; \  n} 
 
}）; 
 alert（“myAjaxausgeführt”）; 
} 
  code>  pre> 
 
 没有chrome显示错误消息：
localhost说致命错误未捕获错误调用wsn-plugin.php中的未定义函数add_action（）：16  p> 
  div>

答

just for completion what i did to reach my goal was. I put some comments in front of the code lines. However I'm not certain if they are correct but at the moment they help at least me to understand it a little bit better.

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

and the simple ajax call in the script file

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

And to show you the result visually the pictures of the steps

Unfortunately because of the stack overflow code correction i cannot post pictures here...

At the end you can see it changed the text to the variable we get from the php file

答

It sounds like you did not load your javascript file from your plugin using wp_register_script() and wp_enqueue_script().

EDIT: There are other issues here but I ignored them since they were not the cause of the error you got. You will want to read https://codex.wordpress.org/AJAX_in_Plugins and pay special attention to the section "Separate JavaScript File". That should get you sending the data to the correct URL and being able to process it.

WordPress Custom Plugin按钮onclick调用php函数

相关推荐