Отправка JSON с сервера на клиент?

Question

[Валерий Жмышенко]

Доброго времени суток!
Есть роут для выдачи всех покупателей:

$app->get('/api/customers', function(Request $request, Response $response){
    $sql = "SELECT * FROM customers";
    try{
        // Get DB Object
        $db = new db();
        // Connect
        $db = $db->connect();
        $stmt = $db->query($sql);
        $customers = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        echo json_encode($customers);
    } catch(PDOException $e){
        echo '{"error": {"text": '.$e->getMessage().'}';
    }
});

Как мне отправить JSON с API чтобы я мог его получить на клиенте например так:

let data;
        const xhr = new XMLHttpRequest();
        xhr.open('GET', '/api/customers', true);
        xhr.onload = () => {
            if (xhr.status !== 200) {
                console.log(xhr.status + ': ' + xhr.statusText);
            } else {
                data = JSON.parse(xhr.responseText);
                console.log(data);
            }
        };
        xhr.send();

Сейчас выводит такое:

Comments

[86-sys-ad]

Так Вы хотите получить ответ как объект? или как текст?

[Валерий Жмышенко]

86-sys-ad, как json объект, а приходит текст документа(последний скрин).

[Евгений Чурманов]

Валерий Жмышенко, я правильно понял, что в запросе на /api/customers в ответ приходит целиком, то что на скриншоте?

[86-sys-ad]

Валерий Жмышенко, return $response->withJson($customers);

var xhr = new XMLHttpRequest();

    xhr.open('GET', '/api/customers', true);
    xhr.onload  = function (data) {
        console.log(JSON.parse(data.target['response'])) // Object 
        document.body.innerText = JSON.parse(data.target['response']).customer
    };
    xhr.send();

[Валерий Жмышенко]

Евгений Чурманов, да приходит как на последнем скрине (html документа)

[Валерий Жмышенко]

86-sys-ad, Выдает ошибку

[86-sys-ad]

Валерий Жмышенко, console.log(typeof data) что выводит?

[86-sys-ad]

Валерий Жмышенко, это вставляли в php return $response->withJson($customers);
У вас все в одном файле?

[Валерий Жмышенко]

86-sys-ad, добавил

$app->get('/api/customers', function(Request $request, Response $response){
    $sql = "SELECT * FROM customers";

    try{
        // Get DB Object
        $db = new db();
        // Connect
        $db = $db->connect();

        $stmt = $db->query($sql);
        $customers = $stmt->fetchAll(PDO::FETCH_OBJ);
        $db = null;
        return $response->withJson($customers);
    } catch(PDOException $e){
        echo '{"error": {"text": '.$e->getMessage().'}';
    }
});

это файл customers.php

[Валерий Жмышенко]

86-sys-ad, console.log(typeof data) выводит string.
xhr.responseText - выводит текст html документа, а JSON.parse(xhr.responseText); - выдает ошибку "Uncaught SyntaxError: Unexpected token < in JSON at position 0"

[86-sys-ad]

Валерий Жмышенко, У меня в slim так просто пример

$app->any('/panel/post', 'App\Controllers\AdminController:all_post') //основной шаблон, вывод всех постов
public function all_post(Request $request, Response $response, $args)
    {
        $stmt = $this->pdo->query("SELECT * FROM `post` ORDER BY `post`.`id` DESC");
        $posts = $stmt->fetchAll(\PDO::FETCH_ASSOC);

        return $this->view->render($response, 'admins/xhrHTML.twig');
    }

а другой метод, выдает например какой нибудь текст

$app->any('/panel/post/one', 'App\Controllers\AdminController:post_one')
    public function xhrHttp(Request $request, Response $response)
    {
        $post =  [
            'file' => 'file.txt'
        ];

        return $response->withJson($attr);
    }

вот только что сделал все норм отрабатывает

[86-sys-ad]

Валерий Жмышенко, Вы попробуйте

$app->get('/api', function(Request $request, Response $response) {
    // тут просто выводит шаблон
}
$app->get('/api/customers', function(Request $request, Response $response) {
    //  а тут выводит выдачи всех покупателей
}

Answer 1

[Евгений Чурманов]

Вариант 1. Сделать как написано в документации . Вместо
echo json_encode($customers);
Делаем так:
return $response->withJson($data);

Вариант 2.

header('Content-Type: application/json'); //HTTP загловок
echo json_encode($customers);
die(); //Стоп. Не возвращаем стандартный response от слима

Comments

[Валерий Жмышенко]

Пробовал оба варианта, результат не изменился.

[Евгений Чурманов]

Валерий Жмышенко, покажите, что в index.php лежит. Похоже что какая-то мидлевара применяет шаблон html документа ко всем запросам.

[Сергей delphinpro]

Валерий Жмышенко, Именно так оно должно работать и работает.
Вы не должны делать никакого вывода. Вместо этого вы должны работать с объектом Response и возвращать его из функции или метода обработчика роута.
Для отправки json использовать метод withJson(), для отправки текста добавлять его методом write().

Answer 2

[Lander]

Ну если вы принципиально не хотите отдавать результат через $response, то допишите exit(); в конец функции.

Comments

[Валерий Жмышенко]

Я не пойму как мне получить JSON на клиенте, например через XHR. Через Postman работает

А в консоли браузера - как на последнем скрине.

[Евгений Чурманов]

Валерий Жмышенко, со стороны JS все в порядке, правьте PHP.

Хотя, как вариант, можно попробовать через fetch.

fetch('/api/customers')
    .then(res => res.json())  //Парсится json из ответа
    .then(data => {
        console.log(data);  //Обработка пришедших данных
    })
    .catch(err => console.error(err));

[Валерий Жмышенко]

Евгений Чурманов, если через fetch то выдает ошибку "SyntaxError: Unexpected token < in JSON at position 0".

[Евгений Чурманов]

Валерий Жмышенко, сatch поймал ошибку на попытку распарсить ответ от сервера. Значит там есть какой-то мусор.
Судя по ошибке, вместо JSON'а пришел HTML.

Открываем вкладку Сети в панели разработчика браузера, и смотрим, что приходит от сервера.

[Евгений Чурманов]

Валерий Жмышенко, еще можно res.json() заменить на res.text(), что бы не пытаться распарсить пришедший ответ, а посмотреть, что пришло в чистом виде через console.log

[Валерий Жмышенко]

Евгений Чурманов, поменял, приходит html документа

[Валерий Жмышенко]

Евгений Чурманов, приходит html документа

[Евгений Чурманов]

Суть ошибки понятна, по урлу public/api/customers вместо JSON'а, приходит html-ка с документом.
Судя по этому скриншоту, шаблон документа оборачивается вокруг результата метода (JSON-результат в ответе есть, но до него и после него откуда-то взялся html).


Покажите код index.php, что-то мне подсказывает, что в нем все не так, как должно быть.

[Валерий Жмышенко]

Евгений Чурманов,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <script src='https://code.jquery.com/jquery-3.4.1.min.js'></script>
    <script>
    fetch('/public/api/customers')
        .then(res => res.json())
        .then(data => {
            console.log(data);
        })
        .catch(err => console.error(err));
    </script>
</body>
</html>

собственно тоже что и присылается в ответе.

[Евгений Чурманов]

это именно код в index.php, а не точно выдает браузер, при открытии стартовой страницы? (тут только html же)

как вообще обработка урла /public/api/customers должна у вас попасть в php?

И кстати, в javascript'е урл /public/api/customers, а в php обработчик навешивается на /api/customers

[Валерий Жмышенко]

Евгений Чурманов, если в js url не писать public, то выдает ошибку - GET rest-api.loc/api/customers 404 (Not Found)

Answer 3

[Daria Motorina]

header('Content-Type: application/json');
 echo json_encode($customers);

Укажите тим возвращаемого ответа через header явно

Comments

[Валерий Жмышенко]

Пробовал, в консоли выдает вот такое:

[Daria Motorina]

Валерий Жмышенко, Это преодолимая проблема - читайте решение тут