利用ajax实现左右分栏局部刷的思路

来源:互联网 发布:淘宝怎样看自己几颗心 编辑:程序博客网 时间:2024/06/08 10:05
<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

0 0
原创粉丝点击