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

最新推荐文章于 2019-06-11 23:46:29 发布

from_lazy_boy

最新推荐文章于 2019-06-11 23:46:29 发布

阅读量1.9k

点赞数

分类专栏： node.js 文章标签： node.js

本文链接：https://blog.csdn.net/u013310075/article/details/25191785

版权

node.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<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){   这样就可以了});