WordPress using js ajax and php to pass variables

Question

a plugin provides 3 html elements 2 text inputs and 1 button to save it

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

<?php
   /*
   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(){
    $.ajax({
        type: "POST",
        url: 'http://localhost/wp/',
        data:{action:'call_this'},
        success:function(response) {
        alert(response);
        $('#result').html(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:

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?

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

Answer 1

In your ajax call you are not calling any php script. You call the site http://localhost/wp/ and if there is no logic to handle your post, the response will just load the site.

Answer 2

@kratze is correct for why it is just returning the entire site. To expand on his answer:

You need to send the ajax request to the appropriate url for all wordpress ajax calls. Add

wp_localize_script( 'test', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

right below (but in the same function still)

wp_enqueue_script

Now you should be able to use ajax_object.ajax_url for the url in your js file.

But that's not alllllll. Now it will be sending the ajax request to the appropriate url but that url isn't going to know what to do with the request, because right now you are expecting your plugin file to run and catch the request with $_POST['action'] check.

Replace:

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

With:

add_action( 'wp_ajax_call_this', 'stckvrflw_my_action' );
add_action( 'wp_ajax_nopriv_call_this', 'stckvrflw_my_action' );
function stckvrflw_my_action() {
    echo 'Did we get here?';
    wp_die();
}