Вывод информации из json используя ajax

05 марта 2022, 10:50

Используя api стороннего сервиса я отправляю информацию наших заказов. На этом сервисе у заказов 3 статуса: новые, активные и завершенные. Сейчас я создаю страницу с выводом заказов в статусе "новые" всю информацию получаю в json. Возможно ли с помощью ajax выводить все такие заказы без перезагрузки страницы, т.е. при первом посещении страницы прогружаются заказы, которые были в получаемом json, а далее чтобы информация появлялась или исчезала при изменении json без нажатия дополнительных кнопок или наведений курсором. Иными словами, чтобы тригером обновления контента было изменение содержимого json.

Answer 1

я так понимаю вопрос скорее в ajax а не в json вот небольшой пример динамического дополнения таблицы. по таймеру раз в секунду вызывается timerproc. В ней делается два запроса (у меня php скрипт читает данные из разных файлов, в вашем случае запрашивайте json). и затем вызывается функция AddData для добавления данных

<script src="Chart.min.js"></script>
<div style="width:100%;height:30%;">
<canvas id="line-chart"></canvas>
</div>
<script language="javascript">
var xmlHttp = new XMLHttpRequest();
let i=1;
let chartv = new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1,2],
    datasets: [{label: "one", data: [1,1], borderColor: "#3e95cd", fill: false},
               {label: "two", data: [2,2], borderColor: "#ff00cd", fill: false}]
  },
  options: {
    title: {
      display: true,
      text: ''
    }
  }
});
function addData(data1,data2) {
    chartv.data.labels.push(i++);
    chartv.data.datasets[0].data.push(data1);
    chartv.data.datasets[1].data.push(data2);
    //charvt.data.labels.splice(0, 1); // remove first label
    chartv.update(0);
}
function httpGet(theUrl){
    xmlHttp.open( "GET", "get.php?file="+theUrl, false ); // false for synchronous request
    xmlHttp.send( null );    
    return xmlHttp.responseText; 
}
function timerproc(val,file,btn){
  let data1 = httpGet("_one.dat");
  let data2 = httpGet("_two.dat");
  addData(data1,data2);
}
 let timer1 = setInterval(timerproc, 1000);
</script>

вам остается только вставить свои запросы и возможно реализовать контроль новых значений (надо ли обновлять данные)