【问题标题】:Using AJAX to add results to the bottom of a page使用 AJAX 将结果添加到页面底部
【发布时间】:2016-06-19 14:51:27
【问题描述】:

我有一些代码可以遍历一些数据库结果并显示它们,因此...... 注意:文章 item.php 只是用一些格式来回显结果。

 <ul class="post-column">
                            <?php 
                            foreach ($data as $lineitem):
                            $type = $lineitem['type'];
                            if($type == "article"){
                               require('php/articleitem.php');
                            }

                            endforeach; 
                            ?>
                        </ul>

当我到达页面底部时,我想做一个 AJAX DB 调用以获得进一步的结果...

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 700) {
        startpoint = startpoint + 10;

        processing = true;

        $.ajax({
            url: "AJAX/moritems.php",
            type: "post",
            async: false,
            //this is where we define the data that we will send
            data: {
                startpoint: startpoint,
            },
            success: function (data) {

            },
        });
        processing = false;
    }

然后我想使用数据库结果在我已经在屏幕上显示的数据下方显示更多数据,但是因为我已经在 PHP 中显示了结果,我该怎么做?我是否必须使用 AJAX 加载带有结果的新 php 页面,然后使用 javascript 将其添加到结果底部的现有页面?

【问题讨论】:

    标签: php arrays ajax


    【解决方案1】:

    答案是肯定的。示例:

    function load() {
        var xmlhttp;
    
        xmlhttp = new XMLHttpRequest();
    
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
               if(xmlhttp.status == 200){
                   document.getElementById("myDiv").innerHTML += xmlhttp.responseText;
               }
               else if(xmlhttp.status == 400) {
                  alert('There was an error 400')
               }
               else {
                   alert('something else other than 200 was returned')
               }
            }
        }
    
        xmlhttp.open("GET", yoururl, true);
        xmlhttp.send();
    }
    

    您需要定义yoururl并将函数链接到您的分页按钮的click事件或在您scroll时运行它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-03
      • 2021-07-18
      • 2013-11-18
      • 1970-01-01
      • 1970-01-01
      • 2017-08-26
      • 2018-12-18
      相关资源
      最近更新 更多