Получение данных JSON в запросе AJAX из загрузчика медиафайлов

Вопрос или проблема

jQuery(document).ready(function($){

  var file_frame;

  jQuery('.upload_image_button').live('click', function( event ){

    event.preventDefault();

    if ( file_frame ) {
      file_frame.open();
      return;
    }

    file_frame = wp.media.frames.file_frame = wp.media({
      title: jQuery( this ).data( 'uploader_title' ),
      button: {
        text: jQuery( this ).data( 'uploader_button_text' ),
      },
      multiple: true 
    });

    file_frame.on( 'select', function() {

      var selection = file_frame.state().get('selection');
      selection.map( function( attachment ) {
        attachment = attachment.toJSON();
        $.post(ajax_object.ajaxurl, {
           action: 'ajax_action',
           data: attachment
        }, function(data) {
           console.log(data);  
        });
      });
    }); 

    file_frame.open();
  });

});

function ajax_action_stuff() {
    $image_data = $_POST['data'];
    $data = json_decode( $image_data, true );
    var_dump( $data );
    // echo $data[url];
    die(); 
}
add_action( 'wp_ajax_ajax_action', 'ajax_action_stuff' );

function gzmu_load_scripts() {
    wp_enqueue_media();
    wp_enqueue_script( 'gzmu-media-upload', plugin_dir_url(__FILE__) . 'gzmu-media-upload.js' );
    wp_localize_script( 'gzmu-media-upload', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_style( 'admin-styles', plugin_dir_url(__FILE__) . '/css/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'gzmu_load_scripts' );

$data_key1 = $_POST['key1'];
$data_key2 = $_POST['key2'];
// и так далее ...

echo json_encode($content, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);

function( content ) {
    var myContent = JSON.parse(content);
    // делайте то, что хотите с парами "ключ-значение" в myContent
}

Ответ или решение

Рассмотрим задачу получения данных в формате JSON через запрос AJAX, исходя из описания проблемы, связанной с использованием загрузчика медиафайлов в плагине WordPress. Мы разберём теоретические аспекты, предложим пример кода, затем применим это знание в практике для решения вашей проблемы.

Теория

AJAX (Asynchronous JavaScript and XML) — это метод, который позволяет веб-приложениям взаимодействовать с сервером асинхронно без необходимости обновления страницы. Это особенно полезно для работы с загрузчиками медиа, где требуется выбор файлов и последующая обработка данных на стороне сервера.

JSON (JavaScript Object Notation) — это текстовый формат для обмена данными, который легко читается человеком и автоматически парсится в различных языках программирования, включая JavaScript и PHP. В контексте AJAX-запросов он часто используется для передачи данных между клиентом и сервером.

Ваша проблема, вероятно, связана с неправильным пониманием передачи данных через AJAX и обработки JSON в PHP. Ошибка заключается в попытке декодировать строку, которая уже передается в виде массива, а не JSON.

Пример

Давайте начнем с анализа и исправления вашего JavaScript кода:

jQuery(document).ready(function($){

  var file_frame;

  jQuery('.upload_image_button').on('click', function(event) {

    event.preventDefault();

    if (file_frame) {
      file_frame.open();
      return;
    }

    file_frame = wp.media.frames.file_frame = wp.media({
      title: jQuery(this).data('uploader_title'),
      button: {
        text: jQuery(this ).data('uploader_button_text'),
      },
      multiple: true 
    });

    file_frame.on('select', function() {
      var selection = file_frame.state().get('selection');
      selection.map(function(attachment) {
        attachment = attachment.toJSON();

        // Здесь мы передаем данные как отдельные ключ-значения
        $.post(ajax_object.ajaxurl, {
           action: 'ajax_action',
           id: attachment.id, // Пример передачи отдельной переменной
           url: attachment.url // Добавьте больше полей по необходимости
        }, function(responseData) {
           console.log(responseData);  
        });
      });
    }); 

    file_frame.open();
  });

});

Теперь, давайте рассмотрим PHP функцию, которая обработает эти данные:

function ajax_action_stuff() {
    // Получить данные из POST запроса
    $attachment_id = intval($_POST['id']);
    $attachment_url = esc_url($_POST['url']);

    // Какая-то логика обработки
    $result = array(
        'id' => $attachment_id,
        'url' => $attachment_url
    );

    // Возврат результата как JSON
    echo json_encode($result, JSON_UNESCAPED_SLASHES|JSON_UNESCAPED_UNICODE|JSON_PRETTY_PRINT);
    wp_die(); // Используйте wp_die() для корректного завершения AJAX запросов в WordPress
}
add_action('wp_ajax_ajax_action', 'ajax_action_stuff');

Обратите внимание, что мы заменили $_POST['data'] многими полями, такими как $_POST['id'] и $_POST['url'], чтобы напрямую работать с данными POST запроса, которые отправлены jQuery.

Применение

1. Понимание формата данных: При отправке данных из JavaScript в PHP через AJAX переданные данные находятся в виде ассоциативного массива. Это означает, что их нерезонно интерпретировать как JSON строку, используя json_decode. Вместо этого вы должны обращаться к соответствующим ключам массива, таким как $_POST['id'] или $_POST['url'].

2. Правильное подключение скриптов: Убедитесь, что ваши скрипты и стили правильно подключены с использованием хука admin_enqueue_scripts. Это позволит избежать ситуаций, когда JavaScript код не выполняется из-за отсутствия необходимых библиотек.

3. Работа с медиабиблиотекой WordPress: Если вы работаете с загрузкой изображений из медиабиблиотеки, убедитесь, что у вас установлены правильные права доступа и вы используете функции WordPress для безопасной обработки данных.

4. Обработка данных и их возврат: В PHP вы должны обрабатывать полученные данные и возвращать результат в виде JSON. Это обеспечивает хороший User Experience (UX), позволяя обновлять интерфейс пользователя на основе ответа от сервера.

Таким образом, вы можете управлять загрузкой и обработкой медиа файлов в вашем плагине WordPress, используя AJAX и JSON, что повышает интерактивность и удобство вашего приложения. Применяя данные рекомендации, вы сможете избежать многих распространённых ошибок и обеспечить надёжную работу ваших ресурсов.