0

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

1 ответ 1

2

я так понимаю вопрос скорее в 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>

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

2
  • Благодарю за ответ. Про таймер тоже читал думал воспользоваться. Но я просто хочу понять уже чисто из интереса, может ли тригером обновления быть ни таймер,кнопка или какое-либо другое действие внутри страницы, а изменение содержимого файла?
    – Naur
    22 янв 2020 в 9:05
  • 1
    @Naur Ваша клиентская часть ничего не знает о файле, лежащем на сервере. Поэтому вас два пути - постоянно опрашивать сервер на наличие изменений( что и написано в ответе) или что бы сервер вас оповещал об изменении файла (веб сокеты). Других вариантов пока что нету. 22 янв 2020 в 11:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.