AJAX 在 WordPress 中选择 2

Question

我正在尝试将 AJAX 结果放入 WordPress 中的 select2。我是 WordPress 新手 AJAX。我把下面的代码放在 WordPress 的 functions.php 文件中。

function get_data()
{
    echo 'Ajax call output:';
    wp_die(); 
}

add_action('wp_ajax_get_data', 'get_data'); 
add_action('wp_ajax_nopriv_get_data', 'get_data'); 


function team_scripts()
{
    wp_localize_script('team_script', 'team_ajax_url', array('ajax_url' => admin_url('admin-ajax.php')));   
    wp_enqueue_script('Select2', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', null, null, true);
    wp_enqueue_style('Select2', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
    wp_enqueue_style('team_style', get_template_directory_uri() . '/assets/css/team_style.css');
    wp_enqueue_script('team_script', get_template_directory_uri() . '/assets/js/team_script.js', array('jquery'), '1.0.0', true);
}

add_action('wp_enqueue_scripts', 'team_scripts');

我将下面的代码放在 team_script.js 文件中。

(function($) {
  var states = [];
  
  $(document).ready(function() {
    $(".volunteer").on("click", function(event) {
      // Check if select is already loaded
      if (!$(this).has("select").length) {
        var cellEle = $(this);

        // Populate select element
        cellEle.html(`<select class="js-example-basic-multiple" multiple="multiple"></select>`);

        // Initialise select2
        let selectEle = cellEle.children("select").select2({
          ajax: {
            url: "/wp-admin/admin-ajax.php",
            dataType: 'json',
            processResults: function(data) {
              return {
                results: data
              };
            },
          }
        });
      }
    });
  });
})(jQuery)

我得到如下结果

我在控制台中遇到错误。

Answer 1

您的 ajax 调用中需要 action 参数：

let selectEle = cellEle.children("select").select2({
    ajax: {
        url: "/wp-admin/admin-ajax.php",
        data: {
            'action' : 'get_data',
        }
        dataType: 'json',
        processResults: function(data) {
            return {
            results: data
            };
        },
    }
});

JS中action的值是指“wp_ajax_get_data”和“wp_ajax_nopriv_get_data" 动作名称。

AJAX 在 WordPress 中选择 2

AJAX select2 in WordPress

jquery

ajax

wordpress

jquery-select2