Множество значений в 1 ajax запросе

Question

Всех приветствую. Недавно начал осваивать верстку и возникла проблема.

Разрабатываю интерфейс для IOT устройства, для обновления данных на экране использую ajax, но для того, чтобы обновить 3-4 значения нужно... использовать целых 4 запроса?

Можно ли как-то запросить множество параметров 1 запросом?

Сейчас использую это:

frontend:

<!DOCTYPE HTML>

<html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <meta charset="utf-8">
    <h1 style="text-align: center;"> v0.1 beta </h1>
</head>

<body>
    <script>

        window.onload = function () {
            getData();
        };

        setInterval(function () {
            getData();
        }, 2000); 
        
        function getData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("current_temp").innerHTML =
                        this.responseText;
                }
            };
            xhttp.open("GET", "read_sensor", true);
            xhttp.send();
        }
    </script>

    <div id="real_values">
        Temp: <span id="current_temp">0.0</span>
    </div>
</body>

</html>

backend:

    void handle_view_sensor_value()
    {
    
      sensors.requestTemperatures();
    
      float temperatureC = sensors.getTempCByIndex(0);
    
      String adcValue = String(temperatureC);
    
      server.send(200, "text/plane", adcValue);
    
    }

  server.on("/view/read_sensor", handle_view_sensor_value); <- 1 запрос = 1 метод-обработчик, возвращающий.. всего лишь 1 значение.

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

Можно ли 1 запросом взять несколько значений?

Может, для этого нужно вообще не ajax использовать?

Заранее спасибо

Answer 1

Можно вернуть JSON строку и при принятия запроса преобразовать с помощью JSON.parse( this.responseText) в array/object.

Так же я бы переместил JS код перед закрывающим тегом body:

<!DOCTYPE HTML>

<html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <meta charset="utf-8">
    <h1 style="text-align: center;"> v0.1 beta </h1>
</head>

<body>
    <div id="real_values">
        Temp: <span id="current_temp">0.0</span>
    </div>

    <script>
        getData();
        
        function getData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    let data = JSON.parse(this.responseText); // получим array/object
                    // ...

                    // Запускаем вызов данной функции через 2 сек.
                    setTimeout(getData, 2000);
                }
            };
            xhttp.open("GET", "read_sensor", true);
            xhttp.send();
        }
    </script>
</body>

</html>

or

function getData()
{
    fetch('read_sensor')
    .then(res => res.json())
    .then(data =>
        {
            // в переменной data - array/object
            console.log('data: ', data)

            setTimeout(getData, 2000);
        })
    .catch(e =>
        {
            console.log('Error: ', e);
            setTimeout(getData, 2000);
        });
}

БЛОГ НА HUSL

Множество значений в 1 ajax запросе

Ответы (1 шт):