WordPress使用js ajax和php在客户端和服务器之间传递变量 [英] WordPress using js ajax and php to pass variables from client to server and back

问题描述

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

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

我的插件php文件中的代码，提供了以下元素:

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

因此，在相关的wordpress页面上，我添加了简码[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.

要捕获onclick函数，我使用了特定于插件的js文件:

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:

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

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?

其他信息:如果我将ajax发布网址更改为

Additional Information: If i change the ajax post url to

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

推荐答案

@kratze对于为什么只返回整个站点是正确的.扩展他的答案:

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

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

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

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

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

但这不是全部.现在它将把ajax请求发送到适当的URL，但该URL不会知道如何处理该请求，因为现在您希望插件文件运行并通过$ _POST ['action'捕获该请求] 查看.

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.

替换:

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

这篇关于WordPress使用js ajax和php在客户端和服务器之间传递变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！