Блог

Итак, я создаю простое веб-приложение для тестирования Ajax, и по какой-то причине я получаю ошибку JSON.parse, хотя я возвращаю свои результаты в формате JSON, используя json_encode($results) . Приложение позволяет мне выбирать клиента и извлекать заказы этого клиента

JS-файл :

 
function getOrders(clientId) {
    $.ajax(
            {
            type: 'POST',
            url: "AjaxRequests.php",
            data : {
                action: 'showOrders',
                clientId: clientId
            },
            dataType : 'json',
            success: function(results){
                alert(results);
            },
            error: function(request, status, error){
                console.log(clientId);
                console.log(request.responseText);
                console.log('error : '   error);
                console.log('status'   status);
            },
            
            }
    )
};
 

AjaxRequests.php файл

 <?php 
header('Content-Type: application/json; charset=UTF-8');
require_once './GestionClients.php';

if (isset($_POST['action'])) {
    if ($_POST['action'] == 'showOrders') {
        $clientId = $_POST['clientId'];
        $gc = new GestionClients();
        $results = $gc->getCmdsByClient($clientId);
        echo json_encode($results);
    }
}

?>
 

и это результаты, которые я получаю в консоли после выбора клиента (первого клиента в этом примере с идентификатором = 1 в БД) из списка выбора:

 1 script.js:16:25
Connection successfull![{"id":"2","date":"2021-02-17","type":"1","payee":"1","idClient":"1"},{"id":"4","date":null,"type":null,"payee":null,"idClient":"1"}] script.js:17:25
error : SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data script.js:18:25
statusparsererror
 

Я попытался поместить этот результат JSON в онлайн-анализатор JSON, и он выглядит просто отлично.
Спасибо за ваше время.

Как я часто советую, этой проблемы можно было избежать или, по крайней мере, быстро определить, разбив проблему: вы пытались отладить JS, но это была не та часть, которая была сломана.

В этом случае у вас есть две ключевые части:

1. PHP-скрипт, который при запросе с правильными параметрами выдает что-то. Вы можете открыть это в своем браузере и убедиться в этом сами.
2. Некоторый JS-код, который запрашивает этот PHP-скрипт и анализирует его содержимое как JSON. Вы можете проверить это с помощью PHP-скрипта, который просто повторяет {"hello": "world"} , или даже текстового файла, загруженного на ваш сервер.

Как только вы узнаете, что код JS работает, если JSON допустим, вы можете в принципе игнорировать # 2 и искать проблемы в # 1.

Если вы откроете написанный вами PHP-скрипт в браузере, он покажет:

 Connection successfull![{"id":"2","date":"2021-02-17","type":"1","payee":"1","idClient":"1"},{"id":"4","date":null,"type":null,"payee":null,"idClient":"1"}]
 

Теперь мы знаем, что JS попытается проанализировать это как JSON, поэтому мы можем провести быстрый тест в консоли нашего браузера:

 JSON.parse('Connection successfull![{"id":"2","date":"2021-02-17","type":"1","payee":"1","idClient":"1"},{"id":"4","date":null,"type":null,"payee":null,"idClient":"1"}]');
 

Мы получаем синтаксическую ошибку! Ну, конечно, мы делаем: это «Успешное соединение!» не должно было быть частью JSON.

Итак, мы копаемся в PHP-коде, выясняем, откуда это происходит, и останавливаем это. Теперь мы снова запускаем PHP, и это выглядит так:

 [{"id":"2","date":"2021-02-17","type":"1","payee":"1","idClient":"1"},{"id":"4","date":null,"type":null,"payee":null,"idClient":"1"}]
 

Теперь мы можем снова выполнить наш тест JS:

 JSON.parse('[{"id":"2","date":"2021-02-17","type":"1","payee":"1","idClient":"1"},{"id":"4","date":null,"type":null,"payee":null,"idClient":"1"}]');
 

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

Только теперь мы возвращаемся и запускаем исходный вызов AJAX и смотрим, все ли это работает. Если это не так, мы ищем другие шаги, которые мы можем выполнить, и повторяем процесс.