时间戳

首页 > 解决方案 > 无法通过 ajax 正确显示数据

javascript - 无法通过 ajax 正确显示数据

问题描述

当我尝试使用 ajax 调用方法时，信息无法正确显示，如果我直接将方法调用到页面，它将正确显示

索引.php

  <input class="common_selector brand custom-control-input" type="checkbox" 
    id="brand" value="cat" 
   name="brand" value="brand">

 <div class="isotope-grid cols-3 mb-2" id="changeingDiv">
 </div>

 <script>
$(document).ready(function() {
  filter_data();

  function filter_data() {

     var url = "<?php echo URLROOT; ?>";
     var brand = get_filter('brand');


    $.ajax({
      url: url + '/shops/viewshop',
      method: "POST",
      data: {

        brand: brand

      },
      success: function(data) {
        $('#changeingDiv').html(data);
      }
    });
  }

  function get_filter(class_name) {
    var filter = [];
    $('.' + class_name + ':checked').each(function() {
      filter.push($(this).val());
    });
    return filter;
  }

});

viewshop 方法

public function viewshop(){

  $shop = $this->shopModel->getcatShop();


  $output = '';



  $output ='
           <div class="gutter-sizer"></div>
           <div class="grid-sizer"></div>';

 foreach ($shop as $shops){
  $output .='
    <div class="grid-item">
              <div class="product-card" data-price="'.$shops->product_price.'"><a class="product-thumb" href="'.URLROOT.'/show?view='.$shops->product_title.'&cat='.$shops->p_cat_id.'"><img src="'.URLROOT.'/img/product/'.$shops->product_img1.' " alt="'.$shops->product_title.'"></a>
              <h3 class="product-title"><a href="'.URLROOT.'/show?view='.$shops->product_title.'&cat='.$shops->p_cat_id.'">'.$shops->product_title.'</a></h3>
              <h4 class="product-price">OMR '.number_format($shops->product_price, 3).'</h4>
              <div class="product-buttons">
                <a href="'.URLROOT.'/show?view='.$shops->product_title.'&cat='.$shops->p_cat_id.'" class="btn btn-outline-primary btn-sm">Add to Cart</a>
              </div>
            </div>
          </div>';
     }




    echo $output;

  }

当我使用 ajax 调用该方法时，这就是显示的内容

在此处输入图像描述

但是，如果我直接调用该方法到索引页面，结果将被正确查看这里是代码：

        <div class=" isotope-grid cols-3 mb-2">


      <div class="gutter-sizer"></div>
      <div class="grid-sizer"></div>


      <?php foreach ($data['shops'] as $shop) : ?>
        <div class="grid-item">
          <div class="product-card" data-price="<?php echo $shop->product_price; ?>">
            <a class="product-thumb" href="<?php echo URLROOT; ?>/show?view=<?php echo $shop->product_title; ?>&cat=<?php echo $shop->p_cat_id; ?>">
              <img src="<?php echo URLROOT; ?>/img/product/<?php echo $shop->product_img1; ?>" alt="<?php echo $shop->product_title; ?>"></a>
            <h3 class="product-title"><a href="<?php echo URLROOT; ?>/show?view=<?php echo $shop->product_title; ?>&cat=<?php echo $shop->p_cat_id; ?>"><?php echo $shop->product_title; ?></a></h3>
            <h4 class="product-price">OMR <?php echo number_format($shop->product_price, 3); ?></h4>
            <div class="product-buttons">

              <a href="<?php echo URLROOT; ?>/show?view=<?php echo $shop->product_title; ?>&cat=<?php echo $shop->p_cat_id; ?>" class="btn btn-outline-primary btn-sm">Add to Cart</a>
            </div>
          </div>
        </div>
      <?php endforeach; ?>

    </div>

这是我得到的结果，也是我在使用 ajax 调用时想要的结果

在此处输入图像描述

我想要做的是当我使用 ajax 调用该方法时，它应该正确显示。

标签： javascriptphpajax

解决方案

在$(document).ready()之外添加您的函数

<script>
function filter_data() {
    var url = "<?php echo URLROOT; ?>";
    var brand = get_filter('brand');
    $.ajax({
        url: url + '/shops/viewshop',
        method: "POST",
        data: {
            brand: brand
        },
        success: function(data) {
            $('#changeingDiv').html(data);
        }
    });
}

function get_filter(class_name) {
    var filter = [];
    $('.' + class_name + ':checked').each(function() {
        filter.push($(this).val());
    });
    return filter;
}

$(document).ready(function() {
    filter_data();
});
</script>

推荐阅读