Question

我正在尝试使用jQuery和PHP创建一个AJAX过滤器。当我的用户从下拉列表中选择一种成分时，我希望在我的数据库中看到是否存在含有该成分的配方以及用户是否创建了配方。此查询工作正常，允许我循环并为每个配方创建HTML。我想通过AJAX更新HTML。目前我为我的AJAX提供了这个：

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

这是我调用的PHP脚本，当它被调用时，我希望在PHP循环并获取每个食谱后，用ID cookbook-recipe和下面的HTML替换div中的默认数据。

<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

0m

然而，当我点击按钮并且没有控制台错误时，HTML不会被替换，有人能看出原因吗？

Answer 1

它可能对你有帮助。

在variable中设置所有HTML并最终回显它：

$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回调事件中。

通过jQuery AJAX请求替换HTML内容

1 个答案: