Несколько Divs, обновляющихся из базы данных mysql

Вопрос:

Я новичок в php и ajax, и я пытался создать панель мониторинга в реальном времени, которая обновляется из базы данных mysql без обновления страницы. Я смог создать это в моем коде ниже, но я борюсь за то, как адаптировать это, чтобы он работал с несколькими sql-запросами и разными Div.

В настоящее время мой код запускает sql-запрос и выводит его на идентификатор OrderSubmitted Div. Я хочу, чтобы вывести еще один sql-запрос в div Id Orders Выполнено, как я буду делать это?

HTML

          <div class="row">
<!-- Left Box -->
<div class="col-lg-6 col-sm-6" style="padding-right:15px; padding-left:0px">
<div class="well" style="height: 300px;">
<h2 style="text-align:center; font-size:8em;">
<div id="SubmittedOrders"></div>
</h2>
<p style="text-align:center; font-size:1.5em;">Outstanding Orders</p>
</div>
</div>
<!-- Right Box -->

<div class="col-lg-6 col-sm-6" style="padding-left:15px; padding-right:0px">
<div class="well" style="height: 300px;">
<h2 style="text-align:center; font-size:8em;">
<div id ="OrderFulfilled"></div>
</h2>
<p style="text-align:center; font-size:1.5em;">Orders fulfiled today</p>
</div>
</div>

</div>

Сценарий AJAX

function getOrderStatus() {

?>

<script>
// IE5/6 support

function ajax_loop() {

if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

// Create function for handling AJAX response
// Set dashboard div contents to the response for Submitted Orders
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("SubmittedOrders").innerHTML = xmlhttp.responseText;
setTimeout(ajax_loop, 1000);
}
}

// Send AJAX request
xmlhttp.open("POST","getOrderStatus.php");
xmlhttp.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
xmlhttp.send("action=update");

}

ajax_loop();

</script>

<?php

}

Файл GetOrderStatus Php

 <?php
// Query users table
$sql = "SELECT COUNT(STATUS) from CE_TRANSACTIONS where STATUS = 0;";

// Execute query
$result = mysqli_query( $link, $sql );

// Loop through rows and draw table

while ( $row = mysqli_fetch_assoc($result) ) {

foreach ( $row as $field ) {
echo "$field";
}
}

Лучший ответ:

Вы смешиваете обязанности Frontend и backend здесь.

Ваш FrontEnd должен быть статическим HTML с некоторым необходимым JS-кодом. Затем после вашего триггера (возможно, document.ready или какой-либо щелчок на кнопке) функция JS должна выполнить вызов AJAX в файл PHP, который возвращает JSON.

Вы можете вызвать этот PHP файл со своей страницы, используя AJAX один раз для каждого DIV, который вы хотите обновить.

Есть хорошие учебные пособия для динамического изменения содержимого HTML-страницы через AJAX на веб-сайте JQuery.

Например здесь: http://learn.jquery.com/ajax/jquery-ajax-methods/

Некоторые хиты Google: https://www.youtube.com/watch?v=Ga3pOn7wXBA

Оцените статью
TechArks.Ru
Добавить комментарий