使用AJAX和複選框進行PHP搜索

Question

如何讓AJAX知道我用複選框檢查了什麼？我有一個從數據庫中選擇的類別列表。那麼如何讓AJAX知道我檢查了什麼？

這是我的搜索PHP：

<div class ="search-category-container"> 
     <div class ="search-category-header featured-header"> 
      <label class ="featured-font">category</label> 
     </div> 
     <div class ="search-category-content"> 
       <?php 
       $result=mysqli_query($connection,"SELECT * FROM category"); 
       while($row= mysqli_fetch_array($result)) { ?> 
       <label class="checkbox category-list "> 
        <input type="checkbox" name="category_list[]" value="<?php echo $row['name']; ?>" form="search-form"><?php echo $row['name']; ?> 
       </label> 
       <?php 
       } 
       ?> 
     </div> 
    </div> 

這是之前使用的搜索我的搜索功能，無需AJAX。現在我試圖使用AJAX來獲取數據，我可以使用該功能嗎？

<?php 
if($filter == "post" && $time == "all" && $status == "all" && isset ($_POST['category_list'])) { 
foreach ($_POST['category_list'] as $category) { 
    $result = mysqli_query($connection, "SELECT * FROM category WHERE name IN ('$category')")or die(mysqli_error($connection)); 
    while($row= mysqli_fetch_array($result)) { 
     $getCategory = $row['id']; 
     $getPostIDRow = mysqli_query($connection, "SELECT * FROM post_category WHERE category_id = '$getCategory'") or die(mysqli_error($connection)); 
     while($row2= mysqli_fetch_array($getPostIDRow)) { 
      $getPostID = $row2['post_id']; 
      $result2 = mysqli_query($connection,"SELECT * FROM post WHERE title LIKE '%$search%' AND id = '$getPostID'") or die(mysqli_error($connection)); 
      $count2 = mysqli_num_rows($result2); 

if($count2>0) { 
    while($row2= mysqli_fetch_array($result2)) { 
     $postID = $row2['id']; 
     $result3 = mysqli_query($connection, "SELECT * FROM user_post WHERE post_id = '$postID'") or die(mysqli_error($connection)); 
     while($row3 = mysqli_fetch_array($result3)) { 
      $getUserName = mysqli_query($connection, "SELECT * FROM user WHERE id = '".$row3['user_id']."'")or die(mysqli_error($connection)); 
      while($row4 = mysqli_fetch_array($getUserName)) {?> 
       <div class ="post-container" id="search-container"> 
        <div class ="post-header-container"> 
         <div class ="post-header"> 
          <a href ="post.php?id=<?php echo urlencode($row2['id']);?>&user=<?php echo $row3['user_id']; ?>"> 
           <p class ="post-header-font"><?php echo ($row2['title']); ?></p> 
          </a>  
         </div> 
         <div class ="post-user"> 
          <p class ="faded-font">by : <a href="user.php?user=<?php echo $row3['user_id']; ?>"><?php echo $row4['username']; ?></a></p> 
         </div> 
        </div> 
        <div class ="post-content-container"> 
         <p class ="post-content-font"> 
          <?php echo ($row2['summary']); ?> 
         </p> 
        </div> 
        <div class ="post-info-container"> 
         <div class ="post-info"> 
          <span class ="glyphicon glyphicon-eye-open"> views: <?php echo ($row2['views']);?></span> 
         </div><div class ="post-info"> 
          <span class ="glyphicon glyphicon-pencil"> answers:</span> 
         </div><div class ="post-info"> 
          <span class ="glyphicon glyphicon-ok"> status: <?php echo ($row2['status']);?></span> 
         </div> 
        </div> 
       </div><?php 
        } 
       } 
      } 
     } 
    } 
} 
} 
?> 

這是AJAX搜索功能

$(document).ready(function(){ 
function search() { 
    var searchWord = $("#search").val(); 
    var filter = $("#filter:checked").val(); 
    var time = $("#time:checked").val(); 
    var status = $("#status:checked").val(); 
     $.ajax({ 
      type:"post", 
      url:"searchFunction.php", 
      data:"search="+searchWord+"&filter="+filter+"&time="+time+"&status="+status, 
      success:function(data) { 
       $("#searchContainer").html(data); 
       $("#search").val(""); 
      } 
     }); 
} 
$("#searchButton").click(function(){ 
    search(); 
}); 
$("#search").keyup(function(e){ 
    if(e.keyCode == 13) { 
     search(); 
    } 
}); 
}); 

Answer 1

要回答你的AJAX的問題，我強烈建議您更改代碼以使用「形式」 DOM的用戶體驗和更簡單的維護，僅供參考，使用連載函數，它也會發出'checked'複選框。

https://api.jquery.com/serialize/

function search() { 

    var postData = $('myForm').serialize(); // i.e <form id="myForm"> 
     $.ajax({ 
      type:"post", 
      url:"searchFunction.php", 
      data: postData, 
      success:function(data) { 
       $("#searchContainer").html(data); 
       $("#search").val(""); 
      } 
     }); 
} 

這將做所有的工作自動爲您而不必跑了一堆的jQuery選擇電話和放在一起HTTP查詢你的自我。如果你需要知道你的ajax運行的是什麼。進入你的瀏覽器的檢查模式，並尋找「網絡」選項卡，點擊它，你應該看到ajax調用該搜索文件，你需要知道的一切。什麼HTTP請求和響應頭是和身體。

P.s確保您在submit事件上返回false，並且HTML表單上的字段名稱與ajax的$ _POST鍵名稱匹配。

$("#myForm").on('submit', function(){ 
    search(); 
    return false; 
}); 

祝你好運！