2015-04-29 97 views
0

首先,在我向您展示代碼之前,我會解釋我的網頁是如何工作的。編輯PHP/AJAX來處理刪除或編輯

  1. 用戶選擇日期 - > AJAX調用日期變更
  2. 得到的PHP數據顯示在頁面上兩節。
  3. 第一部分訂單目錄
  4. 第二部分項目目錄(不包括內部訂單項)

什麼,我想補充的是功能3個按鍵,將動態改變表使用AJAX。 我目前有非Ajax請求。

這裏是代碼:

$(document).ready(function(){ 
     $('.date-picker').change(function(){ 
      $.ajax({ 
       type: 'POST', 
       url: 'php/getproduct.php', 
       data: {dateorderpicker: $('.date-picker').val()}, 
       dataType: 'JSON', 
       success: function(data) 
       { 
        $("#cartrow").html(data.result_1); 
        $("#otheritems").html(data.result_2); 
       } 
      }); 
     }); 
    }); 

PHP文件目前AJAX:

session_start(); 
    include('db_config.php'); 
    $datepicker = $_POST['dateorderpicker']; 

    $sql = "SELECT * FROM orders WHERE deliveryDate = ? AND customerId = ? "; 
    $stmt = $conn->prepare($sql); 
    $stmt->bindParam(1, $datepicker, PDO::PARAM_STR); 
    $stmt->bindParam(2, $_SESSION['customer_id'], PDO::PARAM_INT); 
    $stmt->execute(); 

    $container = array(); 
    $data['result_1'] = $data['result_2'] = ''; 
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
    { 
     $container[] = "'{$row['itemName']}'"; // put them inside a temporary container 
     $data['result_1'] .= ' 
      <div class="col-sm-4 col-md-4"> 
       <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;"> 
        <div class="content-boxes-text"> 
         <form action="php/edit.php" method="post" class="form-inline pull-right">  
          <h3>' . $row['itemName'] . '</h3> 
          <h4>Total Price: $'.$row['price'].'</h4>  
          <img src="../wholesale/img/sourdough.jpg" class="img-reponsive"> 
          <p>Our best seller. Full of flavour.</p> 
          <div class="form-group"> 
          <label class="sr-only" for="exampleInputAmount">Qty</label> 
          <div class="input-group"> 
          <input type="number" name="qty" class="form-control" id="exampleInputAmount" value="' . $row['qty'] . '"> 
          </div> 
          </div> 
          <input type="hidden" name="id" value="'.$row['id'].'"> 
          <button type="submit" name="update" class="btn btn-primary">Update</button> 
          <button type="submit" name="delete" class="btn btn-primary">Remove</button> 
         </form> 
        </div> 
        <!-- //.content-boxes-text --> 
       </div> 
       <!-- //.content-boxes --> 
      </div> 
     '; 
    } 

    if(!empty($container)){ 

     $excluded_names = implode(',', $container); 
     $sql = "SELECT * FROM item WHERE itemName NOT IN($excluded_names)"; 
     $stmt = $conn->prepare($sql); 
     $stmt->execute(); 
     while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
     { 
      $price =""; 
      if ($_SESSION['customer_band'] == 'A') { 
       $price = $row['bandA']; 
      } 
      else if ($_SESSION['customer_band'] == 'B') { 
       $price = $row['bandB']; 
      } 
      else if ($_SESSION['customer_band'] == 'C') { 
       $price = $row['bandC']; 
      } 
      else if ($_SESSION['customer_band'] == 'D') { 
       $price = $row['bandD']; 
      } 
      else if ($_SESSION['customer_band'] == 'E') { 
       $price = $row['bandE']; 
      } 

      $data['result_2'] .= ' 
      <div class="col-sm-4 col-md-4"> 
       <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;"> 
        <div class="content-boxes-text"> 
         <form action="php/additem.php" method="post" class="form-inline pull-right"> 
          <h4>'.$row['itemName'].'</h4><input id="itemname" type="hidden" name="itemName" value="'.$row['itemName'].'"> 
          <h3>$'.$price.'</h3><input id="price" type="hidden" name="pricetotal" value="'.$price.'"> 
          <img src="../wholesale/img/sourdough.jpg" class="img-reponsive"> 
          <p>'.$row['description'].'</p><input id="description" type="hidden" name="description" value="'.$row['description'].'"> 
          <div class="form-group"> 
          <label class="sr-only" for="exampleInputAmount">Qty</label> 
          <div class="input-group"> 
          <input id="qty" type="number" name="qty" class="form-control" id="exampleInputAmount" placeholder="How Many?"> 
          </div> 
          </div> 
          <button type="submit" id="additem" class="btn btn-primary">Add</button> 
         </form> 
        </div> 
        <!-- //.content-boxes-text --> 
       </div> 
       <!-- //.content-boxes --> 
      </div> 
     '; 
     } 
    } 
    else 
    { 
     $sql = "SELECT * FROM item"; 
     $stmt = $conn->prepare($sql); 
     $stmt->execute(); 

     while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
     { 
      $price =""; 
      if ($_SESSION['customer_band'] == 'A') { 
       $price = $row['bandA']; 
      } 
      else if ($_SESSION['customer_band'] == 'B') { 
       $price = $row['bandB']; 
      } 
      else if ($_SESSION['customer_band'] == 'C') { 
       $price = $row['bandC']; 
      } 
      else if ($_SESSION['customer_band'] == 'D') { 
       $price = $row['bandD']; 
      } 
      else if ($_SESSION['customer_band'] == 'E') { 
       $price = $row['bandE']; 
      } 

      $data['result_2'] .= ' 
       <div class="col-sm-4 col-md-4"> 
        <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;"> 
         <div class="content-boxes-text"> 
          <form action="php/additem.php" method="post" class="form-inline pull-right"> 
           <h4>'.$row['itemName'].'</h4><input type="hidden" name="itemName" value="'.$row['itemName'].'"> 
           <h3>$'.$price.'</h3><input type="hidden" name="pricetotal" value="'.$price.'"> 
           <img src="../wholesale/img/sourdough.jpg" class="img-reponsive"> 
           <p>'.$row['description'].'</p><input type="hidden" name="description" value="'.$row['description'].'"> 
           <div class="form-group"> 
           <label class="sr-only" for="exampleInputAmount">Qty</label> 
           <div class="input-group"> 
           <input type="number" name="qty" class="form-control" id="exampleInputAmount" placeholder="How Many?"> 
           </div> 
           </div> 
           <button type="submit" id="additem" class="btn btn-primary">Add</button> 
          </form> 
         </div> 
         <!-- //.content-boxes-text --> 
        </div> 
        <!-- //.content-boxes --> 
       </div> 
      '; 
      } 
    } 

    echo json_encode($data); 
    exit; 

兩個更新和刪除PHP文件:

include('db_config.php'); 

if (isset($_POST['update'])) 
{ 
$qty = $_POST['qty']; 
$id = $_POST['id']; 

echo $id; 

$sql = "UPDATE orders SET qty=? WHERE id=?"; 
$stmt = $conn->prepare($sql); 
$stmt->execute(array($qty,$id)); 

header('Location: ../order.php'); 
} 
if (isset($_POST['delete'])) 
{ 
$id = $_POST['id']; 

$sql = "DELETE FROM orders WHERE id=?"; 
$stmt = $conn->prepare($sql); 
$stmt->execute(array($id)); 

header('Location: ../order.php'); 
} 

上面的代碼需要轉換到AJAX,並且使用ajax的頁面上的兩個部分都應該自動更新表格。這可能是你會調用第一個Ajax查詢來正確地重新加載表?

謝謝你看看這個。 我很困惑,我應該怎樣才能完成這項工作。

亞歷

+0

你的意思是說, 「上面的代碼需要轉換成Ajax」 的?你的意思是你想要轉換成Javascript或你想在PHP中做一些異步操作? – Bolza

+0

噢,對,我試圖做到這一點,當我點擊刪除,刪除PHP將被調用,然後頁面上的部分更新顯示更改 – Elevant

回答

1

這是很容易,你可以給一個類(注意:是類)的更新按鈕,同樣刪除按鈕

假設你的更新按鈕有類「update_task」

,但您的內容加入到在DOM已經加載之後的DOM,所以你需要用DELEGATE方法創建兩個ajax請求來刪除和更新。

對於代表參考 - http://api.jquery.com/delegate/

//用於更新

$("body").delegate(".update_task","click",function(){ 
    current_id = $(this).previous("input:hidden").val() // for current update button id, 
     $.ajax({ 
      type: 'POST', 
      url: 'php/update_product.php', 
      data: {id: current_id, othervalues: other_value_of_choice}, 
      dataType: 'JSON', 
      success: function(data) 
      { 
       if(data==1) 
       { 
        // what ever you want to do if data has been updated 
       } 
      } 
     }); 
}); 
0
  1. 發送AJAX請求到PHP的更新/刪除。返回操作結果(真/假)。
  2. 如果結果爲真,使用javascript(jquery)從html中更新/刪除。

順便說一句,不要使用重定向,當你通過ajax調用php。