在Jquery中，ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax() 可以不带任何参数直接使用。
如：实现加载更多功能
Application/Home/View/Work/works.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document - works</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Home/css/works.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- 作品列表 -->
<div class="iso-box-wrapper">
<volist name="works" id="vo">
<div class="iso-box {$vo.type}">
<div class="aaa" href="javascript:void(0)">
<img class="aaa_img" src="{$vo.pic}" alt="{$vo.type}">
<a href="javascript:void(0)" class="bbb" style="background-color: {$vo.title_color}">
<p>{$vo.title}</p>
</a>
<div class="ccc">
<span class="works_id" style="display: none;">{$vo.id}</span>
</div>
</div>
</div>
</volist>
</div>
<!-- 加载更多 -->
<div class="load_more" style="width: 100%;height: 40px;background-color: ;clear: both;position: relative;text-align: center;">
<a href="javascript:void(0)" id="load_more">加载更多</a>
</div>
<!-- ajax请求 -->
<script>
$(document).ready(function() {
var node = 0;
$('#load_more').click(function() {
var iso_box = $(".iso-box .aaa").length;//当前iso-box个数
// alert(iso_box);
node += 8;//点击一次追加8条
$.ajax({
url:'{:U("worksdata")}',
cache: false,
async: false,
data:{node:node,n:iso_box},
dataType: "json",
type:"post",
success:function(datas){
var more_show = datas[0];
var data = datas[1];
var iso_box_html='';
var iso_box_css_js='';
if (more_show == 1) {
$("#load_more").show();
}else{
$("#load_more").hide();
// $("#load_more").text("全部加载完毕！");
}
var iso_box_ajax = $(".iso-box-wrapper");
for (var i in data) { //循环遍历
iso_box_html +='<div class="iso-box '+data[i].type+'">';
iso_box_html +='<div class="aaa" href="javascript:void(0)" data-lightbox-gallery="portfolio-gallery">';
iso_box_html +='<img class="aaa_img" src="'+data[i].pic+'" alt="'+data[i].type+'">';
iso_box_html +='<a href="javascript:void(0)" class="bbb" style="background-color: pink">';
iso_box_html +='<p>'+data[i].title+'</p>';
iso_box_html +='</a>';
iso_box_html +='<div class="ccc">';
iso_box_html +='<span class="works_id" style="display: none;">'+data[i].id+'</span>';
iso_box_html +='</div>';
iso_box_html +='</div>';
iso_box_html +='</div>';
}
iso_box_ajax.append(iso_box_html);
}
});
});
});
</script>
<!-- 注意，ajax请求得到的新数据元素的click，mouseenter等事件是丢失的，是失去动态效果，需要给这些元素重新绑定事件！ -->
<script>
/**
* Jquery
*/
$(document).ready(function() {
/**
* 动画事件
*/
// if ($("body").width()>='1320'){
// $('.iso-box').each(function(e) {
// $(this).mouseenter(function(){
// $(this).find('.aaa_img').stop().animate({top:"-19%"},{easing: 'easeOutExpo'});
// $(this).find('.bbb').stop().animate({top:"62%"},{easing: 'easeOutExpo'});
// })
// $(this).mouseleave(function(){
// $(this).find('.aaa_img').stop().animate({top:"0%"},{easing: 'easeOutExpo'});
// $(this).find('.bbb').stop().animate({top:"100%"},{easing: 'easeOutExpo'});
// })
// })
// }
// // 重新绑定所有动画事件
if ($("body").width()>='1320'){
$('body .iso-box').each(function(e) {
// $(this).mouseenter(function(){
$("body").on("mouseenter", ".iso-box", function() {
$(this).find('.aaa_img').stop().animate({top:"-19%"},{easing: 'easeOutExpo'});
$(this).find('.bbb').stop().animate({top:"62%"},{easing: 'easeOutExpo'});
})
// $(this).mouseleave(function(){
$("body").on("mouseleave", ".iso-box", function() {
$(this).find('.aaa_img').stop().animate({top:"0%"},{easing: 'easeOutExpo'});
$(this).find('.bbb').stop().animate({top:"100%"},{easing: 'easeOutExpo'});
})
})
}
/**
* 鼠标点击事件跳转详情页面
*/
// $('.iso-box').each(function(e) {
// $(this).on("click",function(){
// var works_id = $(this).find('.works_id').text();
// var head_menu_height = $(".gn-head").height();
// setTimeout(reDo, 0);
// function reDo(){
// setTimeout(Redirect_url, 1000);
// function Redirect_url(){
// window.location.href = "";
// }
// }
// })
// })
// 重新绑定所有鼠标点击事件跳转详情页面
$("body").on("click", ".iso-box", function() {
// $(this).on("click",function(){
var works_id = $(this).find('.works_id').text();
var head_menu_height = $(".gn-head").height();
setTimeout(reDo, 0);
function reDo(){
setTimeout(Redirect_url, 1000);
function Redirect_url(){
window.location.href = "";
}
}
// })
})
})
</script>
</body>
</html>
Application/Home/Controller/WorkController.php
<?php
namespace Home\Controller;
use Think\Controller;
class WorkController extends Controller{
public function works()
{
$works = D('Work')->limit(16)->order('id asc')->select();
$total = D('Work')->count();
$this->assign('works',$works);
$this->assign('total',$total);
$this->display();
}
public function worksdata()
{
// 获取作品总数
$count = D('Work')->count();
if(!empty($_POST['node'])){ //点击加载更多
$node = $_POST['node'];//8
$n = $_POST['n'];//16
if (($node+$n)>=$count) {//24>17
$flag =0;
}else{
$flag =1;
}
$bnode= 8; //显示个数
$list = D('Work')->limit($n,$bnode)->order('id asc')->select();
$arr[0] = $flag;
$arr[1] = $list;
$arr.join();
$this->ajaxReturn($arr,'JSON');
}
}
}