如何加载页面而不刷新它

时间：2017-09-22 17:12:02

标签： javascript php jquery ajax

我想在他们收到新订单时加载我的order.php而不刷新整个order.php页面。新订单将在2秒后弹出。这是我的代码的样子。我在youtube上找到了这个代码，我只是按照他的指南，这就是我的目标。我希望你们能帮助我。谢谢！

我的order.php代码

    <?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";
     date_default_timezone_set("Asia/Hong_Kong"); 
     $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;
     }

      .asd {
         color: white;
             font-family: "Times New Roman", Georgia, Serif;
             font-weight: bold;
             text-shadow: 2px 2px black;
     }

    .OrderLegend
     {
        width: 100%;
        border: solid black;
        border-width: 1%;
        background-color: grey;
        padding: 0 2% 5% 2%;
    }

    .LegendText
    { 
    font-family: "Times New Roman", Georgia, Serif;
    font-weight: bold;
    text-shadow: 1px 1px white;
    }

    .OrderStatusText
    { 
    font-family: "Times New Roman", Georgia, Serif;
    font-weight: bold;
    }

    .containerOrderLegend {
        float: left;
        width: 20%;
        padding: 5% .5% 0 1%;
    }

    .containerOrderTitleAndTable {
        float: right;
        width: 80%;
        padding: 0 1% 0 .5%;
    }
     </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 class = "getdata"> //This is the class for function\\
    <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");

     /*x = document.getElementsByName("order_status").value;

     if(x == "Accepted"){
         document.getElementsByName("submitAccept").disabled = true;
     }*/

     }
     </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>

这是我的newOrder.php的代码，这将是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))

$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>
 </tr>

0 个答案:

没有答案
相关问题
最新问题