php+sqlite+ajax从数据库获取列表


demo-get-json-for-list.php文件:
从数据库中读取数据列表,并返回一个json(测试用数据库文件test.db从这里下载
<?php
$page = isset($_GET['page']) ? $_GET['page'] : 1;
define('EACH_PAGE_RECORD',3);
define('RECORD_COUNT',29);
$offset=$page * EACH_PAGE_RECORD - EACH_PAGE_RECORD;
$conn = new SQLiteDatabase('test.db');
$sql = "select id,title from www_1500km_com limit $offset,".EACH_PAGE_RECORD;    
$list = $conn->arrayQuery($sql);    

$a=array();
$i=0;

foreach($list as $v){
  $a[$i]=array(
      'title'=>$v['title']
      ,'id'=>$v['id']
  );
  $i++;
}

$json = json_encode(array('1500km'=>$a,'count'=>RECORD_COUNT));
echo $json;

?>

demo-ajax-list.html文件:
用jquery解析demo-get-json-for-list.php返回的json:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel="shortcut icon" />  
<link href="http://blog.1500km.com/sites/ui-blog/other/favicon.ico" rel=bookmark />  
  
<style>    
hr{ border-bottom:dashed 1px #ccc; border-top:solid 0px #ccc;}    
.btn{ background-color:#339933; color:#FFFFFF; padding:3px;}    
body{ font-size:12px; color:#666;}  
li{ line-height:18px;}
</style>    
  
<script type="text/javascript" src="http://blog.1500km.com/sites/ui-blog/other/jquery.js"></script> 

<script type="text/javascript">
var countx=0;
var index=1;


function get_ajax_list(page){
  var url ='/sites/ui-blog/other/demo-get-json-for-list.php';
  url +='?page='+page;
  url += '&t='+Math.random();
  $.getJSON(url,function(data){
      countx=data["count"];
      var temp="";
      var len = data["1500km"].length;
      var id=0;
      var title='';
      for(var i=0;i<len;i++){
          id=data["1500km"][i].id;
          title=data["1500km"][i].title;
          temp += ('<li>');
          temp += ('index='+index);
          temp += (',page='+page);
          temp += (',countx='+countx);
          temp += (',id='+id);
          temp += (','+title);
          temp += ('</li>');
          index++;
      }
      $("#show_list").append(temp);
  });
}


$(document).ready(function(){
  get_ajax_list(1);
  var page=2;
  $("#btn").click(function(){
      get_ajax_list(page);
      page++;
      if(index<countx){
          $("#btn").show();
      }
      else{
          $("#btn").hide();
      }
  });
});


$(document).ajaxStart(function(){ 
    $("#loading").show(); 
}).ajaxStop(function(){ 
    $("#loading").hide(); 
});
</script>

<img src="http://blog.1500km.com/sites/download/images/1500km.png" style="vertical-align:middle;" />php+sqlite+ajax获取数据列表<hr> 

<div class="listb"><ul id="show_list"></ul></div>

<div id="loading" style="display:none">
<img src="http://blog.1500km.com/sites/ui-blog/other/loading.gif"> 
</div> 
    
<input type="button" class="btn" id="btn" value="点击加载更多"><hr>


<br><br>  
<a target="_blank" href="http://www.1500km.com">返回1500km</a> 

程序运行结果如下图所示,点击这里亲自运行看看