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

Question

一个插件提供3个html元素2个文本输入和1个按钮来保存它

我的插件php文件中的代码，提供元素：

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

所以在相关的wordpress页面上我添加了短代码[new_company]，正如你在上面的截图中看到的那样，它是corectly加载的。

捕获onclick函数我使用插件特定的js文件：

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

但是在我点击按钮之后我不仅仅回到了回声字符串而是整个页面本身的标题，请参见下面的截图：

为什么它会传递标题的某些部分以及我的echo命令？以及如何将变量从js文件传递到php文件并返回？

其他信息： 如果我将ajax post url更改为

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

我收到以下错误，并在其他帖子中被告知您不应该这样做，所以我应该怎么做？

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

@kratze是正确的，因为它只是返回整个网站。扩大他的答案：

您需要将ajax请求发送到所有wordpress ajax调用的相应URL。添加

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

正好在下面（但仍然在相同的功能中）

wp_enqueue_script

现在，您应该可以使用ajax_object.ajax_url作为js文件中的网址。

但那并不是真的。现在它将把ajax请求发送到相应的url，但该url不知道如何处理请求，因为现在你期望你的插件文件运行并用$ _POST ['action'捕获请求]检查。

替换：

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

使用：

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

Answer 2

在你的ajax调用中，你没有调用任何PHP脚本。您调用网站http://localhost/wp/，如果没有逻辑来处理您的帖子，响应将只加载网站。