php - 来自 mysql/php Json 编码数据和 Jquery 的 LazyLoad 内容

Question

我正在使用 Jquery mobile 创建一个移动应用程序。我正在从 mysql 数据库获取数据到 PHP 页面，并将数据编码为 Json，然后使用 Jquery ajax 请求将其呈现在我的 HTML 页面中，并将数据附加到 JQM“ ListView ”，但由于数据量很大，我想在用户滚动到页面“延迟加载”底部时逐渐加载 ListView

我的 PHP 代码示例:

$result = mysql_query("SELECT * FROM $tableName ORDER BY alpha");

$array = mysql_fetch_row($result);     

    $data = array();    
    while ($row = mysql_fetch_row($result))
    {   
    $data[] = $row;

    }

    echo $_GET['callback'] . '('.json_encode($data).')';

我的 JS 代码:

 $.ajax({ 
  type: "POST",                                     
  url: 'http://example.com/api.php',  
  dataType: 'jsonp',
  contentType: "application/json",
  cache: false,
  success: function(data)
  { 
  $("#loading").hide();  
    for (var i in data) 
    {
      var row = data[i];          
      var id =  row[0];
      var alpha = row[1]
      var name =row[2];
      var url = row[3];   

     $("#filelist").append('<li id="'+id+'"><input name="name'+id+'" id="song'+id+'" type="checkbox" class="selectme"><label for="song'+id+'" rel="'+url+'">'+name+'</label></li>').trigger("create");   
     $("#filelist").listview("refresh");

    }
      $("#filelist").listview("refresh");

});

这工作正常但从数据库加载我的所有数据我如何才能分块加载数据，而不是一次 我使用航路点插件来检测滚动到底部的 Action 我现在需要的只是帮助从数据库中逐渐加载数据

注意:我尝试使用 dcarrith.github.io/jquery.mobile.lazyloader/但无法找到解决方案。

非常感谢您的帮助

更新:我设法在不同的页面加载来自数据库的 Json 数据，这样我就可以调用 url www.myDomain.com/api.php?page=2 和 www.myDomain.com/api.php?page= 的前 10 个项目1 等等，当你在 jquery Ajax 请求中调用它时，你只加载这个数据量。

实现分页的代码如下:

<?php
  header('Content-type: text/html; charset=utf-8');
  $host = "xxxxxxxxxxx";
  $user = "xxxxxx";
  $pass = "xxxxxx";

  $databaseName = "xxxxxxx";
  $tableName = "xxxxxxxx";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($host,$user,$pass);
  $dbs = mysql_select_db($databaseName, $con);

    $tbl_name="xxxxxx";     //your table name
    // How many adjacent pages should be shown on each side?
    $adjacents = 3;

    /* 
       First get total number of rows in data table. 
       If you have a WHERE clause in your query, make sure you mirror it here.
    */
    $query = "SELECT COUNT(*) as num FROM $tbl_name";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    /* Setup vars for query. */
    $targetpage = "test.php";   //your file name  (the name of this file)
    $limit = 10;                                //how many items to show per page
    $page = $_GET['page'];
    if($page) 
        $start = ($page - 2) * $limit;          //first item to display on this page
    else
    $start = 0;                             //if no page var is given, set start to 0

    /* Get data. */
    $sql = "SELECT * FROM $tbl_name ORDER BY alpha LIMIT $start, $limit";
    mysql_query("SET NAMES utf8;");
    $result = mysql_query($sql);

    /* Setup page vars for display. */
    if ($page == 0) $page = 1;                  //if no page var is given, default to 1.
    $prev = $page - 1;                          //previous page is page - 1
    $next = $page + 1;                          //next page is page + 1
    $lastpage = ceil($total_pages/$limit);      //lastpage is = total pages / items per page, rounded up.
    $lpm1 = $lastpage - 1;                      //last page minus 1

    /* 
        Now we apply our rules and draw the pagination object. 
        We're actually saving the code to a variable in case we want to draw it more than once.
    */
    $pagination = "";
    if($lastpage > 1)
    {}
?>

    <?php
    $data = array();
        while($row = mysql_fetch_array($result))
        {

        // Your while loop here
        $data[] = $row; 

        }
        echo $_GET['callback'] . '('.json_encode($data).')';
    ?>

<?=$pagination?>

现在剩下的是:

HOW TO MAKE THE JQ AJAX REQUEST DYNAMIC TO CALL ?PAGE=2 THEN ?PAGE=3 TILL THE END OF CONTENT !?

我可以使用 WAYPOINT 插件检测滚动到底部的 Action - 非常感谢您的帮助 - 谢谢

Answer 1

您将要向您的 PHP API 和您的 jQuery 移动应用传授“偏移”和“限制”的概念。

假设您想一次加载 10 个元素:

您的第一个请求是:

http://example.com/api.php?offset=0&limit=10

您的第二个请求(在滚动时触发)将是:

http://example.com/api.php?offset=10&limit=10

您会将此 ajax 结果附加到现有列表中...

在您想要的 PHP 方面:

mysql_query("SELECT * FROM $tableName ORDER BY alpha LIMIT $limit OFFSET $offset")