php - 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]，正如您在上面的屏幕截图中看到的那样，它是正确加载的。

为了捕捉 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 帖子网址更改为

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

标签： phpajaxwordpress

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 文件中使用 url。

但这还不是全部。现在它将向适当的 url 发送 ajax 请求，但该 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();
}