WordPress使用js ajax和php将变量从客户端传递到服务器并返回

a plugin provides 3 html elements 2 text inputs and 1 button to save it enter image description here

The code in my plugin php file, to provide the elements:

   Plugin Name: WSN Plugin
   description: Maintain all the connections to LimeSurvey
   Version: 0.2
   Author: M.Huber
   Author URI: www
   License: GPL2

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

if($_POST['action'] == 'call_this') {
    echo "test";

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

add_shortcode('new_company', 'wpb_new_company');

so on the related wordpress page i added the shortcode [new_company] and as you can see on the screenshot above it is loaded corectly.

to catch the onclick function i use a plugin specific js file:

function callAjax(){
        type: "POST",
        url: 'http://localhost/wp/',
        success:function(response) {

But after i click the button i do not just get back the echo string but the whole header of the page itself, see screenshot below: enter image description here

Why is it passing some parts of the header as well as my echo command? and how can i pass variables from the js file to the php file and back?

Additional Information: If i change the ajax post url to

url: 'http://localhost/wp/wp-content/plugins/wsn-plugin/wsn-plugin.php',

i get the following error and was advised in other posts that you should not do it like that so how should i do it?

enter image description here

Fatal error: Uncaught Error: Call to undefined function add_action() in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php:11 Stack trace: #0 {main} thrown in C:\xampp\htdocs\wp\wp-content\plugins\wsn-plugin\wsn-plugin.php on line 11
2018/05/15 14:47
  • wordpress
  • php
  • ajax
  • 点赞
  • 收藏
  • 回答