通過jQuery AJAX請求替換HTML內容

Question

我正在嘗試使用jQuery和PHP創建AJAX過濾器。 當我的用戶從下拉列表中選擇一種配料時，我會在數據庫中查看該配料是否存在配方以及用戶是否創建了該配方。 此查詢工作完美，使我可以遍歷並為每個配方創建HTML。 我想通過AJAX更新HTML。 目前，我的AJAX擁有以下功能：

$(document).ready(function() {
    $('#filterButton').click(function(e) {
        e.preventDefault();
        // When the filter button is clicked, grab the ingredient ID and the cuisine ID
        var mainIngred = $('#sel1').val();
        var cuisine = $('#cuisine').val();
        var userID = $('#userIDHidden').val();

        var data = {
            "ingredID"  :   mainIngred,
            "tagID"     :   cuisine,
            "userID"    :   userID
        }

        var filterajaxurl = '/recipe-project/filter-ajax.php';

        $.ajax({
            url: filterajaxurl,
            type: "POST",
            data: data,
            success:function(data) {
                $("#cookbook-recipe").html(data);
            }
        });
    });
});

這是我調用的PHP腳本，當它被調用時，我想在PHP遍歷並獲得每個配方后，用下面的HTML將ID中的默認數據替換為ID cookbook-recipe。

include_once('classes/class-database-functions.php');
$db_functions = new Database_Functions();    
$ajax_recipes = $db_functions->ajax_filter_search(23,6);    
$recipes_array = array();    
foreach ($ajax_recipes as $ajax_recipe) {
    $search_recipes = $db_functions->get_single_recipe($ajax_recipe);
    $rows = mysqli_fetch_array($search_recipes, MYSQL_ASSOC);
    array_push($recipes_array,$rows);
} ?>


    <?php
       if (isset($recipes_array) ) {
           foreach ( $recipes_array as $single_recipe ) { ?>
               <div class="col-md-4 portfolio-item">
                   <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
                       <?php if ( $single_recipe['recipe_image'] == '' ) { ?>
                           <img class="img-responsive" src="http://placehold.it/300x200" alt="">
                       <?php } else { ?>
                           <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
                       <?php } ?>
                   </a>
                   <h4>
                       <a href="#">
                           <?php echo $single_recipe['recipe_name']; ?>
                       </a>
                   </h4>
               </div>
           <?php } } else { ?>
           <div class="col-md-4 portfolio-item">
               <h4>Please Add Some Recipes</h4>
           </div>
      <?php } ?>

以下是我的默認HTML

<button id="filterButton" class="btn btn-lg active" role="button">Filter Recipes</button>
<div id="cookbook-recipes" class="col-md-9">
           <?php
           if (isset($recipes_array) ) {
           foreach ( $recipes_array as $single_recipe ) { ?>
            <div class="col-md-4 portfolio-item">
                <a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
                  <?php if ( $single_recipe['recipe_image'] == '' ) { ?>
                      <img class="img-responsive" src="http://placehold.it/300x200" alt="">
                  <?php } else { ?>
                    <img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
                   <?php } ?>
                </a>
                <h4>
           <a href="#">
             <?php echo $single_recipe['recipe_name']; ?>
           </a>
         </h4>
            </div>
          <?php } } else { ?>
          <div class="col-md-4 portfolio-item">
              <h4>Please Add Some Recipes</h4>
          </div>
          <?php } ?>
        </div>

但是，當我單擊按鈕並且沒有任何控制台錯誤時，HTML並沒有被替換，有人可以看到原因嗎？

Answer 1

它可能會幫助您。

將所有HTML設置為variable ，最后回顯它：

$html_reponse = "";
<?php
 if (isset($recipes_array) ) {
     foreach ( $recipes_array as $single_recipe ) {
         $html_reponse .= "<div class='col-md-4 portfolio-item'>";
             $html_reponse .= "<a href='single-recipe.php?id=".$single_recipe['recipe_id']."'>";
                 if ( $single_recipe['recipe_image'] == '' ) {
                    $html_reponse .= "<img class='img-responsive' src='http://placehold.it/300x200' alt=''>";
                 } else {
                    $html_reponse .= "<img class='img-responsive' src='".$single_recipe['recipe_image']."' alt=''>";
                 }
             $html_reponse .= "</a>";
             $html_reponse .= "<h4>";
                 $html_reponse .= "<a href='#'>".$single_recipe['recipe_name']."</a>";
             $html_reponse .= "</h4>";
         $html_reponse .= "</div>";
     }
 }else{
    $html_reponse .= "<div class='col-md-4 portfolio-item'>";
      $html_reponse .= "<h4>Please Add Some Recipes</h4>";
    $html_reponse .= "</div>";
}

echo $html_reponse;exit;

在您的JS中：

success:function(data) {
    // remove this alert after your testing.
    // It is just to placed that we successfully got the reponse
    alert("We got Response");
    // Just showing response in Browser console 'press F12 shortcut to open console in your browser'
    console.log(data);
    // removing existing HTML from the container and then entering new one!
    $("#cookbook-recipe").empty().html(data);
}

如果仍然無法正常工作，則可能在獲取響應方面遇到一些問題。 確保涉及到您的Ajax success回調事件。