前端纯js(html+css+jquery+ajax)实现网站页面获取后端数据并进行条件筛选功能
2019-01-03 15:32
756 查看
自己封装了一个基于html+css+jquery+ajax封装了一个网站页面获取后端数据并进行条件筛选的功能,复用性高,兼容google、ie9-11等主流浏览器,话不多说,直接上代码:
效果图:
html:
[code]<div class="choose"> <p class="type_name" id="devicebrand"> <a class="type_content type">品牌:</a> <span class="before_color default_color " id="brand_addr">全部</span> </p> <div href="#" class="back" > 收起 <i class="fa fa-angle-up fa-lg down"></i> </div> <p id="more_brand" class="type_name type_name_more more_brand"> </p> <div href="#" class="more"> 更多 <i class="fa fa-angle-down fa-lg down"></i> </div> <hr/> <p class="type_name1" id="androidVersion"> <a class="type_content type">Android版本:</a> <span class="before_color default_color" id="edition_android">全部</span> </p> <div href="#" class="back1" > 收起 <i class="fa fa-angle-up fa-lg down"></i> </div> <p id="more_androidVersion" class="type_name1 type_name_more more_androidVersion"> </p> <div href="#" class="more1"> 更多 <i class="fa fa-angle-down fa-lg down" ></i> </div> <hr/> <p class="type_name3" id="iosVersion"> <a class="type_content type">iOS版本:</a> <span class="before_color default_color" id="edition_ios">全部</span> </p> <div href="#" class="back3" > 收起 <i class="fa fa-angle-up fa-lg down"></i> </div> <p id="more_iosVersion" class="type_name3 type_name_more more_iosVersion"> </p> <div href="#" class="more3"> 更多 <i class="fa fa-angle-down fa-lg down"></i> </div> <hr/> <p class="type_name2" id="resolution"> <a class="type_content type">分辨率:</a> <span class="before_color default_color" id="resolution_addr">全部</span> </p> <div href="#" class="back2" > 收起 <i class="fa fa-angle-up fa-lg down"></i> </div> <p id="more_resolution" class="type_name2 type_name_more more_resolution"> </p> <div href="#" class="more2"> 更多 <i class="fa fa-angle-down fa-lg down"></i> </div> <hr /> </div> <div class="main"> <br>已选品牌:</br><textarea id="choosedBrand" cols="100" rows="5" readonly></textarea> <br >已选Android版本:</br><textarea id="choosedAndroidVersion" cols="100" rows="5" readonly></textarea> <br>已选IOS版本:</br><textarea id="choosedIosVersion" cols="100" rows="5" readonly></textarea> <br>已选分辨率:</br><textarea id="choosedResolution" cols="100" rows="5" readonly></textarea> </div>
css:
[code]/*choose*/ .down{ color:rgba(32,140,225,0.8); } .choose { position: relative; padding-left: 10px; color: #666666; margin-top: 0.8%; } .choose p { text-align: left; cursor: pointer; } .choose span { margin-left: 1%; } .choose hr { width: 94%; margin-left: 50px; margin-left: 0px\0; /*兼容IE9-11边距*/ margin-top: 10px; background-color: rgba(0, 0, 0, 0.1); height: 1px; border: none; } .type { font-weight: bold; background-color: white; color: black; padding: 0 20px 0 60px; } /*.type_content {*/ /*margin-right: -50px;*/ /*cursor: auto;*/ /*}*/ .type_name_more { display: none; margin-left: 19%; margin-left: 15%\0; /*兼容IE9-11边距*/ } .type_name_more_add { display: block; } .type_name, .type_name1, .type_name2, .type_name3, .type_name4 { flex-direction: column; } #brand_addr, #edition_ios { position: relative; margin-left: 50px; } #brand_addr { position: relative; margin-left: 78px; } #status_addr, #type_addr, #resolution_addr, #edition_addr { position: relative; } #status_addr { margin-left: 47px; } #resolution_addr { margin-left: 65px; } .before_color { background-color: white; border-radius: 3px; display: inline-block; height: 30px; width: 80px; text-align: center; line-height: 30px; } .add_color { background-color: #5AA7FD; border-radius: 3px; display: inline-block; height: 30px; width: 80px; color: white; text-align: center; line-height: 30px; } .default_color { background-color: #5AA7FD; border-radius: 3px; display: inline-block; height: 30px; color: white; width: 80px; text-align: center; line-height: 30px; } /*more*/ .more, .more2,.more1, .more3{ position: absolute; right: 3%; margin-top: -1.8%; font-size: 12px; color: rgba(32, 140, 225, 0.8); cursor: pointer; } .back,.back1,.back2,.back3{ position: absolute; right: 3%; margin-top: -1.8%; font-size: 12px; color: rgba(32, 140, 225, 0.8); display:none; cursor: pointer; } .more_hidden, .more2_hidden, .more1_hidden,.more3_hidden { display: none; } .main{ position: relative; padding-left: 5%; margin-top: 0.8%; } #choosedBrand,#choosedAndroidVersion,#choosedIosVersion,#choosedResolution{ margin-left: 9%; }
js:
[code]//替换为自己接口数地址 var url="http://172.17.11.201:3000/mock/643/devices/getDevicesInfoList.do"; var date = []; /*-------------choose-------------------*/ $(document).ready(function() { $.ajax({ url : url, type : 'GET', async : false, data : {}, success : function(message) { if (message.resCode == '10000') { devices = message.detail; if (devices.devicesBrandList.length < 10) { $(".more").hide(); } if (devices.resolutionList.length < 10) { $(".more2").hide(); } if (devices.androidVersionList.length < 10) { $(".more1").hide(); } if (devices.iosVersionList.length < 10) { $(".more3").hide(); } for (var i = 0; i < devices.devicesBrandList.length; i++) { if ("" != devices.devicesBrandList[i] && i < 10) { $("#devicebrand").append("<span class='before_color brand'>"+ devices.devicesBrandList[i]+ "</span>"); } else if ("" != devices.devicesBrandList[i] && i >= 10) { if(i % 10 ==0 && i>10){ $(".more_brand").append("<p class='type_name1'></p>"); } $(".more_brand").append("<span class='before_color brand'>"+ devices.devicesBrandList[i]+ "</span>"); } } for (var i = 0; i < devices.androidVersionList.length; i++) { if ("" != devices.androidVersionList[i] && i < 10) { $("#androidVersion").append("<span class='before_color edition_android'>"+ devices.androidVersionList[i]+ "</span>"); } else if ("" != devices.androidVersionList[i] && i >= 10) { if(i % 10 ==0 && i>10){ $(".more_androidVersion").append("<p class='type_name1'></p>"); } $(".more_androidVersion").append("<span class='before_color edition_android'>"+ devices.androidVersionList[i]+ "</span>"); } } for (var i = 0; i < devices.iosVersionList.length; i++) { if ("" != devices.iosVersionList[i] && i < 10) { $("#iosVersion").append("<span class='before_color edition_ios'>"+ devices.iosVersionList[i]+ "</span>"); } else if ("" != devices.iosVersionList[i] && i >= 10) { if(i % 10 ==0 && i>10){ $(".more_iosVersion").append("<p class='type_name1'></p>"); } $(".more_iosVersion").append("<span class='before_color edition_ios'>"+ devices.iosVersionList[i]+ "</span>"); } } for (var i = 0; i < devices.resolutionList.length; i++) { if ("" != devices.resolutionList[i] && i < 10) { $("#resolution").append("<span class='before_color resolution'>"+ devices.resolutionList[i]+ "</span>"); } else if ("" != devices.resolutionList[i] && i >= 10) { if(i % 10 ==0 && i>10){ $(".more_resolution").append("<p class='type_name1'></p>"); } $(".more_resolution").append("<span class='before_color resolution'>"+ devices.resolutionList[i]+ "</span>"); } } } else { console.log("获取出错"); } }, error : function(message) { } }); date.deviceBrand = "", date.searchStr = "", date.sysVersion = "", date.resolution = ""; search(); }); /* 设置choose类下li标签选中背景色变色 */ $(this).removeClass('font_color'); $(this).removeClass('before_color'); $(this).removeClass('default_color'); $(document).ready(function() { $('#brand_addr').click(function() { $('.brand').removeClass('add_color'); }); $('#resolution_addr').click(function() { $('.resolution').removeClass('add_color'); }); $('#edition_android ').click(function() { $('.edition_android').removeClass('add_color'); }); $('#edition_ios ').click(function() { $('.edition_ios').removeClass('add_color'); }); $('.type_name span').click(function() { if ($(this).hasClass('add_color')) { $(this).removeClass("add_color"); $('#brand_addr').removeClass('add_color'); $('.brand').removeClass('default_color'); $('.type_name span').removeClass('default_color'); } else { $('#brand_addr').removeClass('add_color'); $('.brand').removeClass('default_color'); $('.type_name span').removeClass('default_color'); $(this).addClass("add_color"); } search(); }); $('.type_name1 span').click(function() { if ($(this).hasClass('add_color')) { $(this).removeClass("add_color"); $('#edition_android').removeClass('add_color'); $('.edition_android').removeClass('default_color'); $('.type_name1 span').removeClass('default_color'); } else { $('#edition_android').removeClass('add_color'); $('.edition_android').removeClass('default_color'); $('.type_name1 span').removeClass('default_color'); $(this).addClass('add_color'); } search(); }); $('.type_name2 span').click(function() { if ($(this).hasClass('add_color')) { $(this).removeClass("add_color"); $('#resolution_addr').removeClass('add_color'); $('.resolution').removeClass('default_color'); $('.type_name2 span').removeClass('default_color'); } else { $('#resolution_addr').removeClass('add_color'); $('.resolution').removeClass('default_color'); $('.type_name2 span').removeClass('default_color'); $(this).addClass('add_color'); } search(); }); $('.type_name3 span').click(function() { if ($(this).hasClass('add_color')) { $(this).removeClass("add_color"); $('#edition_ios').removeClass('add_color'); $('.edition_ios').removeClass('default_color'); $('.type_name3 span').removeClass('default_color'); } else { $('#edition_ios').removeClass('add_color'); $('.edition_ios').removeClass('default_color'); $('.type_name3 span').removeClass('default_color'); $(this).addClass('add_color'); } search(); }); }) /* 设置列表加载更多 */ $(document).ready(function() { $('.more').click(function() { $('#more_brand').css("display","block"); $('.more').css("display","none"); $(".back").css("display","block"); }); $('.back').click(function() { $('#more_brand').css("display","none"); $('.more').css("display","block"); $(".back").css("display","none"); }); $('.more1').click(function() { $('#more_androidVersion').css("display","block"); $('.more1').css("display","none"); $('.back1').css("display","block"); }); $('.back1').click(function() { $('#more_androidVersion').css("display","none"); $('.more1').css("display","block"); $(".back1").css("display","none"); }); $('.more3').click(function() { $('#more_iosVersion').css("display","blo 22f4e ck"); $('.more3').css("display","none"); $(".back3").css("display","block"); }); $('.back3').click(function() { $('#more_iosVersion').css("display","none"); $('.more3').css("display","block"); $(".back3").css("display","none"); }); $('.more2').click(function() { $('#more_resolution').css("display","block"); $('.more2').css("display","none"); $(".back2").css("display","block"); }); $('.back2').click(function() { $('#more_resolution').css("display","none"); $('.more2').css("display","block"); $(".back2").css("display","none"); }); }); //筛选获取已选标签 function search(){ date.deviceBrand = "", date.AndroidVersion = "", date.IosVersion = "", date.resolution = ""; if($('#brand_addr').hasClass('add_color') || $('#brand_addr').hasClass('default_color')){ $('.brand').each(function() { date.deviceBrand += $(this).text() + "|"; }); } if($('#edition_android').hasClass('add_color') || $('#edition_android').hasClass('default_color')){ $('.edition_android').each(function() { date.AndroidVersion += "android" + $(this).text() + "|"; }); } if($('#edition_ios').hasClass('add_color') || $('#edition_ios').hasClass('default_color')){ $('.edition_ios').each(function() { date.IosVersion += "ios" + $(this).text() + "|"; }); } if($('#resolution_addr').hasClass('add_color') || $('#resolution_addr').hasClass('default_color')){ $('.resolution').each(function() { date.resolution += $(this).text() + "|"; }); } $('.brand').each(function() { if ($(this).hasClass('add_color')){ date.deviceBrand += $(this).text() + "|"; } }); $('.edition_android').each(function() { if ($(this).hasClass('add_color')){ date.AndroidVersion += "android" + $(this).text() + "|"; } }); $('.resolution').each(function() { if ($(this).hasClass('add_color')){ date.resolution += $(this).text() + "|"; } }); $('.edition_ios').each(function() { if ($(this).hasClass('add_color')){ date.IosVersion += "ios" +$(this).text() + "|"; } }); //console.log(date); document.getElementById("choosedBrand").innerHTML=""; document.getElementById("choosedAndroidVersion").innerHTML=""; document.getElementById("choosedIosVersion").innerHTML=""; document.getElementById("choosedResolution").innerHTML=""; $('#choosedBrand').append(date.deviceBrand); $('#choosedAndroidVersion').append(date.AndroidVersion); $('#choosedIosVersion').append(date.IosVersion); $('#choosedResolution').append(date.resolution); };
相关文章推荐
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 2017精华版:jquery 中 ajax功能,获取数据库数据,显示在html页面 01
- js+jQuery+ajax,处理数据和功能的实现
- 基于JavaScript实现前端数据多条件筛选功能
- JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现 加上你的CSS完全可以与EXT媲美哦
- 基于jquery的finkyUI插件与Ajax实现页面数据加载功能
- Mock.js生成随机数据,拦截 Ajax 请求,让前端独立于后端进行开发
- 前端使用JSP来进行开发,用AJAX获取数据,控制返回给前端返回的是JSP页面,还是JSON数据
- struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- 有了html页面,进行二次显示,通过html、JavaScript、jQuery的ajax三种技术,我可以实现任何界面效果
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- 利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- 从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
- 前段html通过js拼接url?name=XXX&gender=XXX,然后调用jQuery的ajax,往后台传参数,前端alert参数是正常的,后端的参数是乱码
- js获取前端时间方法,并且实现定时刷新页面的功能
- 后端往前段传递参数,大部分人都清楚,无非就是发起ajax请求获取后端值,然后通过js写入html相应位置即可。但是前段html页面之间,怎么传递参数呢?
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js