从mysql数据库刷新多个div答案

【问题标题】：Multiple Divs refreshing from mysql database从mysql数据库刷新多个div
【发布时间】：2014-09-14 21:21:24
【问题描述】：

我是 php 和 ajax 的新手，我一直在尝试创建一个实时仪表板，它可以在不刷新页面的情况下从 mysql 数据库进行更新。我已经能够在下面的代码中创建它，但是我正在努力调整它，以便它可以与多个 sql 查询和不同的 Div 一起使用。

目前我的代码运行 sql 查询并输出到 OrderSubmitted Div ID。我想向 div Id Orders Fulfilled 输出另一个 sql 查询，我该怎么做呢？

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's 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";
     }
  }

【问题讨论】：

标签： php mysql ajax live dashboard

【解决方案1】：

您在这里混合了前端和后端的职责。

您的 FrontEnd 应该是带有一些所需 JS 代码的静态 HTML。然后在您的触发器（可能是 document.ready 或单击某些按钮）之后，一个 JS 函数应该对一个返回 JSON 的 PHP 文件进行 AJAX 调用。

对于要更新的每个 DIV，您可以使用 AJAX 从您的页面调用此 PHP 文件一次。

在 JQuery 网站上有通过 AJAX 动态更改 HTML 页面内容的不错的教程。

例如这里：http://learn.jquery.com/ajax/jquery-ajax-methods/

一些谷歌点击：https://www.youtube.com/watch?v=Ga3pOn7wXBA

【讨论】：