【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格式，这里输出的字符格式与前台无关
}
?>