如何加载上下文而不使用ajax刷新整个页面

时间：2017-09-21 08:34:17

标签： javascript php jquery ajax

我是ajax的新手，但我不知怎的理解它。如何在新的ORDER（order_id，order_date和order_time）时刷新页面。我在youtube中找到下面的代码，我只是按照他的代码，我不知道我的代码中有错误。

这是一个页面，如果有新订单，那么它将显示新订单。

<?php 
session_start();

$order_id = $_SESSION['order_id'];


 if (!isset($_SESSION['user_id']))
 {
    header("Location: index.php");
    }
     $_SESSION['navMenu'] = "order";
 ini_set('display_errors', 'On');
 require_once 'includes/database.php';
 include_once 'system_menu.php'; 
 include_once 'ordermodal.php';
 include_once 'ordermodal2.php';
 $sql2 = "SELECT * FROM cart_tbl";
 $sql = "SELECT * FROM order_tbl WHERE order_status = 'Accepted' or order_status = 'Dispatched' or order_status = 'Pending'";
 /*** * SET UP COMBO BOX FOR SEARCH */
 $comboBox = isset($_REQUEST['comboBoxVal']) ? trim($_REQUEST['comboBoxVal']) : '';
 $search_by = isset($_REQUEST['search_by']) ? addslashes($_REQUEST['search_by']) : 0;
 $orders= null;

 if ($comboBox != '') { switch ($search_by) { 
 case 1://Order ID
 $sql .= " AND order_id LIKE '%{$comboBox}%' ";
    break;
case 2://Driver Number
 $sql .= " AND driver_number LIKE '%{$comboBox}%' ";
    break; 
    } 
}
 $carts = mysqli_query(connection2(), $sql2);
 $orders = mysqli_query(connection2(), $sql);
 $search_filters = array(1 => 'Order ID', 2 => 'Driver Number');
 /*** * END SET UP COMBO BOX */ ?>
 <html>
 <head> 
 <title>NEW ORDERS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 <link href="css/bootstrap.css" rel="stylesheet">
 <link href="css/style.css" rel="stylesheet"> 
 <!-- jQuery (necessary for Bootstraps JavaScript plugins) --> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <!-- Include all compiled plugins (below), or include individual files as needed --> 
 <script src="js/bootstrap.min.js"></script>
  <style type="text/css"> 
 body {

    background:url(images/bgformal1.png)fixed no-repeat center;
    background-size:cover;
 }

 </style>
 </head> 
 <body>
 <?php
  if (isset($_SESSION['message'])) {
    $message = $_SESSION['message']; unset($_SESSION['message']);
}
 else {
     $message = "";
 } 
 ?>


 <div class="containerOrderLegend">
  <div class="OrderLegend"> 
 <center>
 <h1 class="LegendText"> LEGEND: </h1>
 <h5 class="OrderStatusText">(Order Status)</h5>
 </center>
 <h4 class="asd"> <button type="button" class="btn btn-primary" input style="background-color:#ffff00;color:black" > View Order </button> = Dispatched </h4>
 <h4 class="asd"> <button type="button" class="btn btn-primary" input style="background-color:#0000ff;color:white" > View Order </button> = Accepted</h4>
<h4 class="asd"> <button type="button" class="btn btn-primary" input style="background-color:#FFA500;color:black" > View Order </button> = Pending</h4>
 </div>
 </div>
<div id = "getdata"> //This is the id for ajax\\
<div class="containerOrderTitleAndTable" > 
 <h1 class="asd">New Orders</h1> 
<div class="panel panel-default" >
 <div class="panel-heading"> <form method="post"> <div class="input-group"> 
 <div class="input-group-addon"> <select name="search_by"> 
 <?php
 foreach ($search_filters as $key => $value): ?>
 <option value="<?= $key ?>" <?= $key == $search_by ? 'selected' : '' ?> > <?= $value ?> </option> 
 <?php 
 endforeach; 
 ?>
 </select>
 </div> 
 <input type="search" name="comboBoxVal" value="<?= $comboBox ?>" class="form-control" placeholder="Search">
 </div> 
 </form> 
 </div> 
 <div class="panel-body">
 <?php
 if ($message != ''): ?>
 <div class="alert alert-success alert-dismissible" role="alert"> 
 <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"> &times;</span></button>
 <?= $message ?> </div>
 <?php endif; ?> 
 <table class="table table-hover table-bordered">
 <thead>
 <tr> 
 <th>Order ID</th> 
 <th>Order Date</th>
 <th>Order Time</th>
 <th>Action</th>
 </tr>
 </thead> 
 <?php
/*** * DISPLAY TABLE */ 
?>
 <tbody> 
<?php if ($orders): ?>
 <?php
 while ($order = mysqli_fetch_array($orders, MYSQLI_BOTH)):
 ?>
<?php
$order_datetime = $order['order_datetime'];
$date = date('Y-m-d', strtotime($order_datetime));
$time = date('H:i:s', strtotime($order_datetime));

?>

 <tr> 
 <td><?= $order['order_id'] ?></td> 
 <td><?= $date ?></td>
 <td><?= $time ?></td>
 <td><button type="button" 
<?php if($order['order_status'] == 'Dispatched'){ ?> input style="background-color:#ffff00;color:black"
 <?php } else if($order['order_status'] == 'Accepted'){ ?> input style="background-color:#0000ff;color:white" <?php } else if($order['order_status'] == 'Pending'){ ?> input style="background-color:#FFA500;color:black" { <?php } ?>
 class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="viewOrder( '<?= $order['order_id'] ?>', '<?= $order['order_id'] ?>', '<?= $order['user_id'] ?>', '<?= $date ?>', '<?= $time ?>', '<?= $order['order_deliveryCharge'] ?>', '<?= $order['order_totalAmount'] ?>', '<?= $order['address'] ?>', '<?= $order['coordinates'] ?>', '<?= $order['driver_number'] ?>', '<?= $order['order_status'] ?>')"> View Order </button>
 </td> 
 </tr>
 <?php endwhile; ?>
 <?php endif; ?> 
 </tbody> 
 </table>
 </div> 
 <div class="panel-footer"> 
 </div>
 </div>
 </div>
 </div>
 <script>
 function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) { 
 document.getElementById("titleModal").innerHTML = "Order Information";
 document.getElementsByName("ORDER_ID")[0].setAttribute("value", order_id); 
 document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
 document.getElementsByName("user_id")[0].setAttribute("value", user_id);
 document.getElementsByName("order_date")[0].setAttribute("value", order_date); 
 document.getElementsByName("order_time")[0].setAttribute("value", order_time); 
 document.getElementsByName("order_deliveryCharge")[0].setAttribute("value", order_deliveryCharge); 
 document.getElementsByName("order_totalAmount")[0].setAttribute("value", order_totalAmount); 
 document.getElementsByName("address")[0].setAttribute("value", address);
 document.getElementsByName("coordinates")[0].setAttribute("value", coordinates); 
 document.getElementsByName("drivers_number")[0].setAttribute("value", driver_number); 
 document.getElementsByName("order_status")[0].setAttribute("value", order_status);  
 document.getElementsByName("viewOrder")[0].setAttribute("name", "viewOrder");

 }
 </script>
 <script> type="text/javascript">
function dis()
{
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","newOrder.php",false);
    xmlhttp.send(null);
    document.getElementById("getdata").innerHTML=xmlhttp.responseText;

}
dis();

setInterval(function(){
dis();
},2000);
</script>
 </body>
 </html>

这就是我的order.php页面中弹出的内容

<?php
$databaseHost = "localhost"; 
 $databaseUser = "";
 $databasePassword = "";
 $databaseName = "";

      $con=mysql_connect($databaseHost ,$databaseUser ,$databasePassword );
      mysql_select_db($con,$databaseName);
         $dd_res=mysqli_query($con, "select * from order_tbl");
         while($row=mysqli_fetch_array($dd_res))
{
echo $row["order_id"]." ".$row["order_date"]." ".$row["order_time"];
}   

?>

我希望你们能帮助我。谢谢！

1 个答案:

答案 0 :(得分：0)

我建议使用jquery ajax库。

你应该每隔X秒使用javascript的setInterval（）函数对表的总行数做一些ajax请求，当有更改时，指示或写一个重新加载/刷新当前页面的javascript代码。

相关问题
最新问题