CakePHP 3用Ajax返回的数据替换div中的内容

时间：2018-08-25 05:51:17

标签： jquery ajax cakephp-3.x

我的最终加载目标是，当页面接近页面底部时，从数据库中加载更多项。我创建了从数据库加载6个图表开始的页面。我写了这个jQuery JavaScript 

<script>
(function(){
    $(window).scroll(function () {
       if ($(window).scrollTop() >= $(document).height() - $(window).height() - 0) {
          loadmore();
       }
    });
    divID = $('.chartArea>div:last-child').find('div').attr('id');
    divID = divID.substr(6);
    divID = divID-6;
    function loadmore() {
         $.ajax({`
         `url: "<?php echo $this->Url->build(['action'=>'chartsTest']);?>",
            type: "POST",
            dataType: 'text',
            data:  {'id': divID },
            success: function(data){
                 console.log(data);
                $('.chartArea').html(data);
            }
        });
    };
})();
</script>

除了$('.chartArea').html(data);以外，其他所有方法都有效，<!DOCTYPE html>返回<div class="lay2col chartArea"> <?php foreach($items as $chart) { $card = new \App\Model\Entity\Card(); $card->content_type = (object)[ 'name' => 'chart' ]; $card->content_id = $chart->slug; $card->chart = $chart; ?> <div> <div id="chart-<?=$chart->id?>" class="card-chart card-half card content" title="<?=$card->override('title') ?: $card->chart->title?>"> <?=$this->element('cards/chart', ['card' => $card])?> </div> </div> <?php } ?> 的整个HTML文档并将其插入div chartArea

页面的此部分受第一个数据库调用和JavaScript的影响

HTML 

public function chartsTest() {
    $this->loadModel('Charts');
    if($this->request->is('ajax')) { 
        $chartID = $this->request->data['id'];
        $items = $this->Charts->find('all')->where(['Charts.active'=>true, 'Charts.id >=' => $chartID]);
        $items->order(['Charts.id' => 'desc']);

        $this->autoFilter($items);
        $moreCharts='';
        foreach($items as $chart) { 
            $card = new \App\Model\Entity\Card();
            $card->content_type = (object)[ 'name' => 'chart' ];
            $card->content_id = $chart->slug;
            $card->chart = $chart;
            $moreCharts. = '<div>
                <div id="chart-'.$chart->id.'" class="card-chart card-half card content" title="'.$card->chart->title.'">
                    <a href="/the-palce/charts-and-graphs/'.$card->chart->slug.'">
                        <img class="twox" src="'.$card->image_path.'" alt="'.$card->altTag.'">
                        </div>
                        <div class="graphic-pill">
                            <span class="pill">Chart</span>
                        </div>
                        <div class="btm-info">
                            <p class="summary">'.$card->chart->title.'</p>
                        </div>
                    </a>

                </div>
            </div>';
        };
        $this->set([
            'success' => true,
            'data' => $moreCharts
        ]);
    }  else {
        $items = $this->Charts->find('all')->where(['Charts.active'=>true])->limit(6);
        $items->order(['Charts.id' => 'desc']);
        $this->set([
            'page_title' => 'Charts and Graphs',
            'page'       => 'charts and graphs',
            'items'      => $items
        ]);
    } 
}

这就是我的控制器中的内容

$('.chartArea').html(data);

因此，我必须丢失一些内容，因为当我仅希望变量<!DOCTYPE html>中的数据时，我的JavaScript函数中的$moreCharts返回了整个$dataForView = [ &#039;success&#039; =&gt; true, &#039;data&#039; =&gt; &#039; &lt;div&gt; &lt;div id=&quot;chart-73&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-72&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-71&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-70&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-69&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-68&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-67&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-66&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-65&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-664quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-63&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;div id=&quot;chart-62&quot; class=&quot;card-chart card-half card content&quot; title=&quot;title&quot;&gt; &lt;a href=&quot;/the-place/slug&quot;&gt; &lt;img class=&quot;twox&quot; src=&quot;&quot; alt=&quot;&quot;&gt; &lt;div class=&quot;graphic-pill&quot;&gt; &lt;span class=&quot;pill&quot;&gt;Chart&lt;/span&gt; &lt;/div&gt; &lt;div class=&quot;btm-info&quot;&gt; &lt;p class=&quot;summary&quot;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing.&lt;/p&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; 。奇怪的是，如果检查我可以看到的控制台

__m512i

所以我可以从控制台中看到它正在抓取下6个图表，但我需要知道要隔离它们，然后在div chartArea中添加/替换那些图表。

0 个答案:

没有答案
相关问题
最新问题