【jquery ,ajax,php】加载更多实例

jquery

$(function() {
//初始化
getData(0);
var index = 1;
$("#more").click(function() {
getData(index)
index = index + 1;
})
var cur_page = 1;
var total, total_page, page_size;
//ajax交互
function getData(pageIndex) {
$.ajax({
type: "POST",
url: "test.php",
data: {
"pageIndex": pageIndex
}, //传递参数,作为后台返回页码的依据
dataType: "json", //预期返回的数据为json
beforeSend: function() {
$("#more").text("正在加载中...")
},
success: function(json) { //成功获取数据后,返回json对象,这是一个json的名,以我的理解是json={。。。}
$("#more").text("加载更多...");
total = json.total; //获取json中的total属性值
pageSize = json.pageSize; //获取json中的pageSize属性值
totalPage = json.totalPage;
var list = json.list; //json中的list是一个数组
var li = "";
$.each(list, function(index, content) { //遍历list数组,index是下标,content是这个下标对应的值
li += "<ul><li class='question'>" + content['question'] + "</li><li class='answer'>" + content['answer'] + "</li></ul>";
});
$("#list").append(li);
if (index >= totalPage) {
$("#more").text("没有了").css("background", "#555").unbind("click"); //取消绑定click事件
}
},
error: function() {
alert("加载错误");
}
})
}
})

php

<?php
include_once('conn.php'); $page = intval($_POST['pageIndex']);//接收前台发送的数据 if(!empty($page)){
$result = mysql_query("select id from test1");
$total = mysql_num_rows($result);//总记录数 $pageSize = 3; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数 $startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,question,answer from test1 order by id asc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){//获取所有数据行
$arr['list'][] = array(
'id' => $row['id'],//把行中id字段的值赋值给id
'question' => $row['question'],
'answer' => $row['answer'],
);
} mysql_query('SET NAMES UTF8');
header("Content-Type:text/html;charset = utf-8");
echo json_encode($arr);//转为为json格式,这里输出的字符格式与前台无关
}
?>

  

上一篇:socket实现聊天功能(二)


下一篇:Android基于socket的群聊程序