前端之家收集整理的这篇文章主要介绍了
利用ajax实现左右分栏局部刷的思路,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);"></span><pre name="code" class="html">利用ajax实现左右分栏局部刷的思路
//左边
<ul>
<li class="test" data-url="url1"></li>
<li class="test" data-url="url2"></li>
<li class="test" data-url="url3"></li
</ul>
//右边
<div class="contain"></div>
//ajax请求
$(".test").click(function(){
var _this = $(this);
var _url = _this.attr("data-url");
//这里你就能获取每一个ajax的请求了。
$.get(_url,function(html){
$(".contain").empty().append(html);
});
});
//后台的实现
思路:利用模板引擎+需要加载的数据(比如所有博客的信息)-->生成一个html页面,前端通过请求这个页面的URL来获取生成好的html,显示到右边的内容相应部分即可.
后台模板引擎:1.ejs 2.handlebars(网站:http://handlebarsjs.com/)等
exports.list = function(req,res,next){
Brand.find({}).sort({'name':1}).exec(function(err,brands){
if(err){
return next(err);
}
res.render('app/sys/brand-list',{brands:brands});
});
};
这个是一个路由 app.get('/sys/brand/list',brandController.list);
前端$.get("/sys/brand/lis",function(html){ 这样就可以了});
Demo下载地址:http://download.csdn.net/detail/u013310075/7314265
原文链接:https://www.f2er.com/ajax/164938.html