AJAX刪除多條記錄與複選框

Question

我執行多個刪除使用jQuery和PHP目前我能夠通過點擊複選框來刪除單/多個 Records唱片公司操作其工作細如現在，但我的網頁獲得每次我刪除記錄刷新，因爲我不使用ajax。

我在阿賈克斯我想執行使用JQUERY/AJAX此相同的操作，不會讓我重新加載頁面每次我刪除我的紀錄，所以我想用AJAX進行相同的代碼是初學者，這樣我可以處理我的頁面重新加載。

有人幫我實現它謝謝！

HTML/PHP

<form method="post" name="data_table"> 
      <table id="table_data"> 
       <tr> 
       <td>Name</td> 
       <td>Select All <input type="checkbox" id="check_all" value=""></td> 
      </tr> 
      <?php 
       $query = mysql_query("SELECT * FROM `products`"); 
       while($row = mysql_fetch_array($query)) 
       { 
      ?> 
        <tr> 
         <td> 
          <?php echo $row['product_title']; ?> 
         </td> 
         <td> 
          <input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data"> 
         </td> 
        </tr> 
      <?php 
       } 
      ?> 
      </table> 
      <br /> 
      <input name="submit" type="submit" value="Delete" id="submit"> 
     </form> 

JQuery的

jQuery(function($) 
      { 
      $("form input[id='check_all']").click(function() 
      { 
       var inputs = $("form input[type='checkbox']"); 
       for(var i = 0; i < inputs.length; i++) 
       { 
        var type = inputs[i].getAttribute("type"); 
        if(type == "checkbox") 
        { 
         if(this.checked) 
         { 
          inputs[i].checked = true; 
         } 
         else 
         { 
          inputs[i].checked = false; 
         } 
        } 
       } 
      }); 

      $("form input[id='submit']").click(function() 
      { var inputs = $("form input[type='checkbox']"); 
       var vals=[]; 
       var res; 
       for(var i = 0; i < inputs.length; i++) 
       { 
        var type = inputs[i].getAttribute("type"); 
        if(type == "checkbox") 
        { 
         if(inputs[i].id=="data"&&inputs[i].checked){ 
          vals.push(inputs[i].value); 
         } 
        } 
       } 

       var count_checked = $("[name='data[]']:checked").length; 
       if(count_checked == 0) 
       { 
        alert("Please select a product(s) to delete."); 
        return false; 
       } 
       if(count_checked == 1) 
       { 
        res= confirm("Are you sure you want to delete these product?"); 
       } 
       else 
       { 
        res= confirm("Are you sure you want to delete these products?"); 
       }  
       if(res){ 
       /*** This portion is the ajax/jquery post calling ****/ 
       $.post("delete.php", {data:vals}, function(result){ 
        $("#table_data").html(result); 
       }); 
       } 
      }); 
      }); 

PHP代碼刪除

<?php 
if(isset($_POST['data'])) 
{ 
     $id_array = $_POST['data']; // return array 
     $id_count = count($_POST['data']); // count array 

     for($i=0; $i < $id_count; $i++) 
     { 
     $id = $id_array[$i]; 
     $query = mysql_query("DELETE FROM `products` WHERE `id` = '$id'"); 
     if(!$query) 
     { 
       die(mysql_error()); 
     } 
    }?> 

Answer 1

請做修改jque ry as

jQuery(function($) 
{ 
$("form input[id='check_all']").click(function() 
{ 
    var inputs = $("form input[type='checkbox']"); 
    for(var i = 0; i < inputs.length; i++) 
    { 
     var type = inputs[i].getAttribute("type"); 
     if(type == "checkbox") 
     { 
      if(this.checked) 
      { 
       inputs[i].checked = true; 
      } 
      else 
      { 
       inputs[i].checked = false; 
      } 
     } 
    } 
}); 

$("form input[id='submit']").click(function() 
{ var inputs = $("form input[type='checkbox']"); 
    var vals=[]; 
    var res; 
    for(var i = 0; i < inputs.length; i++) 
    { 
     var type = inputs[i].getAttribute("type"); 
     if(type == "checkbox") 
     { 
      if(inputs[i].id=="data"&&inputs[i].checked){ 
       vals.push(inputs[i].value); 
      } 
     } 
    } 

    var count_checked = $("[name='data[]']:checked").length; 
    if(count_checked == 0) 
    { 
     alert("Please select a product(s) to delete."); 
     return false; 
    } 
    if(count_checked == 1) 
    { 
     res= confirm("Are you sure you want to delete these product?"); 
    } 
    else 
    { 
     res= confirm("Are you sure you want to delete these products?"); 
    }  
    if(res){ 
    /*** This portion is the ajax/jquery post calling ****/ 
    $.post("delete.php", {data:vals}, function(result){ 
     $("#table_data").html(result); 
    }); 
    } 
}); 

}）;

Delete.php作爲

<?php 
if(isset($_POST['data'])) 
{ 
     $id_array = $_POST['data']; // return array 
     $id_count = count($_POST['data']); // count array 

     for($i=0; $i < $id_count; $i++) 
     { 
     $id = $id_array[$i]; 
     $query = mysql_query("DELETE FROM `test` WHERE `id` = '$id'"); 
     if(!$query) 
     { 
       die(mysql_error()); 
     } 
    }?> 
    <tr> 
       <td>ID</td> 
       <td>TITLE</td> 
       <td>Select All <input type="checkbox" id="check_all" value=""></td> 
      </tr> 
      <?php 
       $query = mysql_query("SELECT * FROM `test`"); 
       while($row = mysql_fetch_array($query)) 
       { 
      ?> 
        <tr> 
         <td> 
          <?php echo $row['id']; ?> 
         </td> 
         <td> 
          <?php echo $row['name']; ?> 
         </td> 
         <td> 
          <input type="checkbox" value="<?php echo $row['id'];?>" name="data[]" id="data"> 
         </td> 
        </tr> 
      <?php 
       } unset($row); 

}