Страницы

Поиск по вопросам

вторник, 7 апреля 2020 г.

Wordpress и AJAX - вывод массива в JSON

#php #ajax #json #wordpress #json_encode

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

    function ajax_calc(){
// Прием и обработка POST запроса   

        if(isset($_POST['action']) && $_POST['action'] == 'ajax_calc'){
//ширина, экранируем все лишнее, убираем пробелы и заменяем "," на ".", т.к. пользователь
может ввести любой из знаков
            $width      = str_replace(',','.',trim(htmlspecialchars($_POST['width'])));    
//длина                         
            $length     = str_replace(',','.',trim(htmlspecialchars($_POST['length'])));  
//высота
            $height     = str_replace(',','.',trim(htmlspecialchars($_POST['height'])));

            $m_rul      = str_replace(',','.',trim(htmlspecialchars($_POST['m_rul'])));     

            $k_zap      = str_replace(',','.',trim(htmlspecialchars($_POST['k_zap'])));

// возвратим ошибку, если пришедший к нам параметр не число 
            if(!(float)$width || $width ==''){     
                echo implode(array('loadmsgerr'=>'Error! Width should be number only!'));

            }
            elseif(!(float)$length || $length ==''){
                echo implode(array('loadmsgerr'=>'Error! Lenght should be number
only!'));

            }
            elseif(!(float)$height || $height ==''){
                echo implode(array('loadmsgerr'=>'Error! Height should be number
only!'));

            }
            else{
// иначе вернем результат       
                $Perimeter = ($width + $length) * 2 ; //периметр 
                $Square =  $Perimeter * $height;      //площадь боковых поверхностей
                                // другие вычисления, предобразования...
                                //      возвращаемы массив с данными
                $it_test = 10*$k_zap + $m_rul;
                $answers = array('S' => $Square, 'P' => $Perimeter, 'it_test' =>
$it_test);                      
                echo json_encode($answers);
                        }
                }
        }


А JS при этом вот такой:

jQuery(document).ready(function(){
// ловим клик по кнопке калькулятора 
    jQuery('#calc #form_calc_id').on('submit', function(e){
        jQuery('#calc .result').show().text(ajax_calc_object.loadingmessage);//Обработка...
//AJAX запрос методом POST на указанный url. Тип данных определяем как json        
        jQuery.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_calc_object.ajaxurl,
            data: { //принимаем данные из формы в шаблоне
                'action': 'ajax_calc', //вызов нашей функции
                'width': jQuery('#calc #width').val(), 
                'length':jQuery('#calc #length').val(),
                'height': jQuery('#calc #height').val(),                            
//                'security': jQuery('#security').val()
                'm_rul': jQuery('#pa_м-в-рулоне').text(),
                'k_zap': jQuery('#pa_k-zap').text(),

            },
            success: function(data){
                var resperr = data.loadmsgerr;//получаем заначение ошибки

                if(!resperr){//если нет ошибок
                    json.parse(data);
                    jQuery('#calc .result').html(data.S + data.P); //вставляем в
тег с классом .result полученный ответ
                    jQuery('#Обои').val();
                }
                else{
                    jQuery('#calc .result').text(resperr); //или туда же выводим ошибку
                }

            },
            error: function(xhr, textStatus, errorThrown) {//обработка и вывод в
консоль ошибок
                if (xhr.status != 0) {
                    var msg = ' (' + xhr.status + ') ';
                    if (textStatus) msg += ': ' + textStatus;
                    if (xhr.status < 200) {
                        msg = 'AJAX Informational ' + msg;
                    } else if (xhr.status < 300) {
                        msg = 'AJAX Success ' + msg;
                    } else if (xhr.status < 400) {
                        msg = 'AJAX Redirection ' + msg;
                    } else if (xhr.status < 500) {
                        msg = 'AJAX Client Error' + msg;
                    } else {
                        msg = 'AJAX Server Error' + msg;
                    }
                    console.log(msg);
                } else {
                    console.log(errorThrown);
                }
            }
        });
        e.preventDefault();
    });
});


Проблема в том, что это все не выводит ничего на страничку.
В консоль пишется ошибка 


  AJAX Success  (200) : parsererror


А в переданных от функции данных я вижу строчку 


  {"S":"","P":"","it_test":"19"}0


Так вот, я подозреваю, что вся проблема именно вот в этом 0 в конце json строки.
Но вот откуда он там берется - не понимаю вообще. Может кто знаком с механизмом?
    


Ответы

Ответ 1



Чтобы не получать нуля в конце ajax-ответа, в самом конце функции ajax_calc() вызывайте wp_die()

Комментариев нет:

Отправить комментарий