ajax несколько значений

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

Я пытался вернуть несколько значений из Ajax-вызова,

Я хотел бы вернуть значение а и значение b в две отдельные переменные в моей Ajax-функции.

Это возможно? Или я могу использовать массив? Или мне следует создать отдельную функцию для каждого вызова?

Моя функция: “здесь я выполню один или несколько запросов к базе данных”

function rob_ajax_vorlage() {
global $wpdb;
$a = "100";
echo $a;
$b = "200"; //второе значение, которое пока не работает
echo $b; //второе значение, которое пока не работает
wp_die(); // просто для надежности
}
add_action( 'wp_ajax_rob_ajax_vorlage_approal_action', 'rob_ajax_vorlage' );
add_action( 'wp_ajax_nopriv_rob_ajax_vorlage_approal_action', 'rob_ajax_vorlage' );

И мой Ajax-вызов

jQuery(document).ready(function($) {
    $( '#rob-wp-ajax-vorlage-button' ).click( function() {
    var abc = $( '#abc' ).val();
    $.ajax({
    method: "POST",
    url: ajaxurl,
    data: { 'action': 'rob_ajax_vorlage_approal_action', 'abc': abc, }
    })
     .done(function( data ) {
            console.log('Успешный AJAX-вызов! /// Возвращенные данные: ' + data);  
    .fail(function( data ) {
    console.log('Неудачный AJAX-вызов :( /// Возвращенные данные: ' + data);
  });
  });
  });

Я новичок, поэтому извините, если я задаю что-то странное.

Было бы здорово, если бы кто-то мог помочь мне использовать возврат двух значений.

Спасибо

Роб

Спасибо за совет работать с JSON.

Я думаю, я теперь понял.

Возможно, кто-то мог бы взглянуть на это?

Вот мой код

Кнопка:

<div id="div3">
<button id="rob-wp-ajax-vorlage-button">ок</button>
</div>

Мой PHP код

function load_my_ajax_vorlage()
{
wp_enqueue_script( 'my_custom_js', plugins_url( 'ajax-vorlage-script.js',   __FILE__ ), array('jquery'), false, false );
}
add_action('wp_enqueue_scripts', 'load_my_ajax_vorlage');
add_action( 'wp_footer', 'load_my_ajax_vorlage' );

add_action('wp_enqueue_scripts', 'example_localize_ajax');

function example_localize_ajax(){
wp_localize_script('jquery', 'ajax', array(
    'url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('example_ajax_nonce'),
));
}


//Пример AJAX функции
add_action('wp_ajax_example_function', 'example_function');
add_action('wp_ajax_nopriv_example_function', 'example_function');
function example_function(){

$var1 = "value1";
$var2 = "value2";
echo json_encode(array($var1, $var2));

wp_die(); // это требуется для немедленного завершения и возврата корректного ответа: - https://codex.wordpress.org/AJAX_in_Plugins
}

Мой JS

var ajaxurl="<?php echo admin_url("admin-ajax.php") ?>";
jQuery(document).ready(function($) {
$( '#rob-wp-ajax-vorlage-button' ).click( function() {

jQuery.ajax({
    type: "POST",
    url: ajax.url,
 dateType: 'JSON',
    data: {
        nonce: ajax.nonce,
        action: 'example_function',
        data: {
            //firstname: 'fname',
            //lastname: 'lname'
        },
    },
    success: function(response){
        console.log('Успешный AJAX-вызов! /// Возвращенные данные: ' + response); 
        var result = $.parseJSON(response);     
        console.log('result0 ' + result[0]); 
        console.log('result1 ' + result[1]); 
         },
             error: function(XMLHttpRequest, textStatus, errorThrown){
             console.log('ОШИБКА AJAX-вызова! /// Возвращенные данные: ' + XMLHttpRequest);  
             },
    timeout: 60000
});

return false;
    }); 
 });

Я удалил предложение с PDF, думаю, вы правы.

Я посмотрю на REST API…

Это правильный путь?

Спасибо, Роб

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

Конечно, Роб. Давайте рассмотрим вашу ситуацию и оптимизируем ее для возврата нескольких значений через AJAX в WordPress.

1. Основы работы с AJAX в WordPress

При выполнении AJAX-запросов в WordPress, вы можете возвращать данные в формате JSON. Это позволяет отправлять несколько значений из PHP-функции в JavaScript. Вместо простого возврата строковых значений, мы можем использовать ассоциативный массив, который будет легко обработать на клиентской стороне.

2. Пример кода

PHP-код

Ваш PHP-код будет выглядеть следующим образом:

function load_my_ajax_vorlage() {
    wp_enqueue_script('my_custom_js', plugins_url('ajax-vorlage-script.js', __FILE__), array('jquery'), false, false);
}
add_action('wp_enqueue_scripts', 'load_my_ajax_vorlage');

function example_localize_ajax() {
    wp_localize_script('my_custom_js', 'ajax', array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('example_ajax_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'example_localize_ajax');

add_action('wp_ajax_example_function', 'example_function');
add_action('wp_ajax_nopriv_example_function', 'example_function');

function example_function() {
    // Значения для возврата
    $var1 = "value1";
    $var2 = "value2";

    // Возвращаем значения в формате JSON
    echo json_encode(array(
        'value_a' => $var1,
        'value_b' => $var2
    ));

    wp_die(); // Завершение выполнения скрипта
}

JavaScript-код

Теперь давайте обновим ваш JavaScript-код, чтобы он корректно обрабатывал значения, возвращаемые AJAX-запросом:

jQuery(document).ready(function($) {
    $('#rob-wp-ajax-vorlage-button').click(function() {
        $.ajax({
            type: "POST",
            url: ajax.url,
            dataType: 'JSON', // Убедитесь, что вы ожидаете формат JSON
            data: {
                nonce: ajax.nonce,
                action: 'example_function',
            },
            success: function(response) {
                // Проверяем, удалось ли получить данные
                if (response) {
                    console.log('Успешный AJAX-запрос! Полученные данные: ');
                    console.log('Value A: ' + response.value_a); // Значение A
                    console.log('Value B: ' + response.value_b); // Значение B
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log('Ошибка AJAX-запроса: ' + XMLHttpRequest.responseText);
            },
            timeout: 60000
        });

        return false; // Отключаем стандартное поведение кнопки
    });
});

3. Объяснение изменений

  1. JSON в качестве формата: Мы используем json_encode() для возврата нескольких значений в формате JSON, что делает его удобным для обработки в JavaScript.

  2. Обработчик успешного запроса: В обработчике success мы проверяем, что ответ является корректным объектом, и выводим каждое значение в консоль.

  3. Подключение скрипта: Убедитесь, что скрипт для AJAX подключается корректно и имеет доступ к объекту ajax, который мы создаем с помощью wp_localize_script.

С помощью такого подхода вы сможете легко управлять несколькими значениями, возвращая их из базы данных или выполняя другие необходимые операции в вашем приложении WordPress.

Если у вас есть дополнительные вопросы или что-то неясно, не стесняйтесь спросить!

Оцените материал
Добавить комментарий

Капча загружается...