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

旧城等待， 2022-08-27 04:40 8阅读 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){   这样就可以了});

![SouthEast][]

Demo下载地址:[http://download.csdn.net/detail/u013310075/7314265][http_download.csdn.net_detail_u013310075_7314265]

[SouthEast]: /images/20220824/e893a8d665934be39fb4c2a1a25ac755.png
[http_download.csdn.net_detail_u013310075_7314265]: http://download.csdn.net/detail/u013310075/7314265

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap3 左右分栏左右布局响应式布局代码模板

Bootstrap3 左右分栏布局代码模板效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

一时失言乱红尘/ 2022年12月11日 15:06/ 0 赞/ 317 阅读

相关 Vue实现tab导航栏，支持左右滑动

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。 tab

我就是我/ 2022年10月10日 11:13/ 0 赞/ 80 阅读

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

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 2

旧城等待，/ 2022年08月27日 04:40/ 0 赞/ 9 阅读

相关【B/S】利用AJAX实现分页

一、前言以前在使用Asp.Net的时候用过GridView这个控件，这个控件自带分页的功能，虽然很丑，但是功能还是很强大的。这里呢，给大家展示一下更加给力的

怼烎@/ 2022年08月21日 08:52/ 0 赞/ 135 阅读

相关 ajax 局部刷新

1、jsp网页文件代码 <%@ page language="java" contentType="text/html; charset=utf-8" pageEnc

骑猪看日落/ 2022年06月11日 05:55/ 0 赞/ 265 阅读

相关 js实现左右滑动分页

/ 以下为项目的左右滑动分页 / var startx, starty; //获得角度 function getAngle

﹏ヽ暗。殇╰゛Y/ 2022年06月08日 12:47/ 0 赞/ 275 阅读

相关 markdown 左右分栏 css

markdown是支持css的代码如下： <html> <table style="margin-left: auto; margin-

快来打我*/ 2022年05月15日 13:42/ 0 赞/ 1590 阅读

相关 ajax实现分页

之前写的分页都是a标签直接跳转，这次业务需要不刷新页面实现分页，下面记录原生的实现方法： html //第一页默认展示内容 <div id='user_l

小咪咪/ 2022年02月18日 15:29/ 0 赞/ 293 阅读

相关侧边栏实现思路

如果你们在实际写代码的情况遇见bug可以加我QQ私聊 229236940 侧边栏式例 ![在这里插入图片描述][20190605171854957.gif] 上

爱被打了一巴掌/ 2022年01月22日 08:27/ 0 赞/ 371 阅读

相关 vue之分页栏的实现

当我们在获取后台数据时，特别是获取大量的列表数据时，页面内能展示的数据不能过多，不然让用户看起来很疲惫，体验度不高。这个时候就需要分页栏来实现指定的数据显示在页面上，然后用户点

骑猪看日落/ 2021年06月11日 15:12/ 0 赞/ 509 阅读