在WordPress中向AJAX传递变量的基本问题

时间：2017-04-07 作者：Dongsan

我正在学习AJAX in Plugins 在Wordpress网站上。这是一个非常简单的例子，我正试图按照我的意愿修改这个例子。

我试图实现的目标很简单：

在“选择/选项”下拉列表中选择新选项时，检测所选值，通过AJAX将所选值传递给PHP函数。但是，所选值似乎不是通过AJAX传递的。我得到的结果是：whatever=1234 | whatever2=

如何正确地将变量传递给AJAX？

我的代码：

// Select/Option Dropdown

<select id="_type" name="_type">
  <option value="AAA"> AAA </option>
  <option value="BBB"> BBB </option>
  <option value="CCC"> CCC </option>
</select>


// Detect change and call and AJAX

<script type="text/javascript">
jQuery(\'#_type\'.change(function($) {
  var val = jQuery(\'#_type\').val(); <-- Here I am properly getting val as it changes.
  console.log( \'_type is changed to \' + val );

  var data = {
    \'action\': \'my_action\',
    \'type\': \'post\',
    \'whatever\': 1234,
    \'whatever2\': val <-- But here val becomes empty.  
  };

  jQuery.post(ajaxurl, data, function(response) {
    alert( \'Got this from the server: \' + response );
  });
}).change();
</script>


// PHP function \'my_action\'

add_action( \'wp_ajax_my_action\', \'my_action\' );
function my_action() {
  global $wpdb;
  $whatever = $_POST[\'whatever\'];
  $whatever2 = $_POST[\'whatever2\'];
  echo \'whatever = \' . $whatever . \' | whatever2 = \' . $whatever2;
  wp_die();
}

3 个回复

最合适的回答,由SO网友:Tom J Nowell 整理而成

The simple answer: 不用担心管理AJAX API，使用REST API！

告诉WordPress您的端点：

add_action( \'rest_api_init\', function () { // register dongsan/v1/whatever
        register_rest_route( \'dongsan/v1\', \'/whatever/\', array(
                \'methods\' => \'POST\', // use POST to call it
                \'callback\' => \'dongsan_whatever\' // call this function
        ) );
} );

现在我们有一个端点example.com/wp-json/dongsan/v1/whatever!

我们叫WordPress跑dongsan_whatever 当它被调用时，让我们这样做：

function dongsan_whatever( \\WP_REST_Request $request ) {
    $name = $request[\'name\'];
    return \'hello \'.$name;
}

请注意，我们使用$request[\'name\'] 获取名称参数！

所以我们有一个URL：

example.com/wp-json/dongsan/v1/whatever

我们可以发送一个带有名称的POST请求，然后得到一些JSON，上面写着Hello‘name’！那我们怎么做呢？

Simples，这是一个标准jQuery post 请求：

jQuery.post(
    \'https://example.com/wp-json/dongsan/v1/whatever\',
    { \'name\': \'Dongsan\' }
).done( function( data ) {
    Console.log( data ); // most likely "Hello Dongsan"
} );

进一步阅读：

SO网友:MagniGeeks Technologies

刚刚测试了您的代码，它似乎工作正常。只需确保在change函数中添加一个括号jQuery(\'#_type\').change(function($)

此外，您需要添加no_priv 在前端使用ajax时的操作

add_action( \'wp_ajax_nopriv_my_action\', \'my_action\' );

检查并让我知道这是否适合你。

SO网友:kiarashi

尝试添加type : \'post\', 在…内data = {...}此外，我还缺少ajax函数中的“安全性”。

您能否添加此项并向我们显示结果：

.success( function( results ) {
                   console.log( val );
                } )

小码农CODE

在WordPress中向AJAX传递变量的基本问题

相关推荐

WordPress AJAX错误400向远程站点发送数据的错误请求