找到
4
篇与
前端
相关的结果
-
防止重复发送 Ajax 请求的解决方案 问题描述 在页面中有多个按钮，点击该按钮可以异步的去服务端读取数据，然后在前端将数据展示出来。 每个按钮点击请求的页面都是同一个，但是请求的参数不同，所以返回的内容就不同。 在连续点击多个按钮的时候就会发出多个异步请求。那么根据请求返回的快慢(因为不同按钮参数不同，返回内容不同，所以会有快慢之分），数据会依次的展示出来，那么就会出现一个先点击的按钮，由于他请求的数据量比较大，导致数据被后显示出来。 问题解决 解决这种问题有两种方式： 1.当连续进行多个请求，并且请求的url地址相同时。放弃前面的所有请求，只执行最后一次请求。 2.当连续进行多个请求，并且请求的url地址相同时。放弃后面的所有请求，只执行第一次请求。 解决方案 一、将ajax请求的async设置为false $.ajax({ async: false, type : "POST", url : defaultPostData.url, dataType : 'json', success : function(data) { } }); async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 二、利用jquery ajaxPrefilter中断请求 由于第一种方案只是一种曲线救国的方式，其实没能真正的解决上面的问题。所以，建议使用这种方式。 var pendingRequests = {}; $.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = options.url; console.log(key); if (!pendingRequests[key]) { pendingRequests[key] = jqXHR; }else{ //jqXHR.abort(); //放弃后触发的提交 pendingRequests[key].abort(); // 放弃先触发的提交 } var complete = options.complete; options.complete = function(jqXHR, textStatus) { pendingRequests[key] = null; if ($.isFunction(complete)) { complete.apply(this, arguments); } }; }); Prefilters是一个预过滤器，在每个请求之前被发送和$.ajax()处理它们前处理。 options 是请求的选项 originalOptions 值作为提供给Ajax方法未经修改的选项，因此，没有ajaxSettings设置中的默认值 jqXHR 是请求的jqXHR对象 以上内容的核心思想是维护一个队列，发送请求时，将请求加入队列，请求响应后，从队列中清除，这就保证了在任一时刻只能有一个同样的请求发送. 局限性：仅仅是前台防止jquery的ajax请求。对于非jquery的ajax请求，不起作用。因为使用的是jquery的ajaxPreFilter函数，仅仅对jquery的ajax请求有作用。 调用abort后jquery会执行error的方法，抛出abort的异常信息。可以使用以下方式区分出该类型的异常。 var ajax = $.ajax({ 'error':function(jqXHR, textStatus, errorThrown){ if(errorThrown != 'abort'){ //ajax被调用abort后执行的方法 alert('您的ajax方法被停止了'); } } }) Demo 按钮每次点击都会向后端发送请求，下面的demo实现了多次点击按钮之后，只保证最后一次点击的请求能够成功。 button1 button2 button3 var pendingRequests = {}; jQuery.ajaxPrefilter(function( options, originalOptions, jqXHR ) { var key = options.url; console.log(key); if (!pendingRequests[key]) { pendingRequests[key] = jqXHR; }else{ //jqXHR.abort(); //放弃后触发的提交 pendingRequests[key].abort(); // 放弃先触发的提交 } var complete = options.complete; options.complete = function(jqXHR, textStatus) { pendingRequests[key] = null; if (jQuery.isFunction(complete)) { complete.apply(this, arguments); } }; }); $("#button1").live("click", function() { $.ajax('config/ajax/appinfoListFetcher.json', { type:'POST', data: {param1:value1, param2:value2, }, success: function(res){ //后端数据回写到页面中 }, error:function(jqXHR, textStatus, errorThrown){ if(errorThrown != 'abort'){ alert('应用加载失败！'); } } }); }); java狗写前端代码亚历山大，欢迎拍砖~
-
-
Echart的使用 ECharts(Enterprise Charts)，是百度的一套商业级数据图表。 官网地址：http://echarts.baidu.com/index.html Github地址：https://github.com/ecomfe/echarts Echart提供了很多丰富多彩的图表。只要我们引入echart相关的前端资源，再按照要求生成数据，就能展示出很漂亮的图表来。 Ecahrt的使用 一、引入Echart 百度提供了几种方式在我们的web项目中引入echart，文档地址：http://echarts.baidu.com/doc/doc.html#%E5%BC%95%E5%85%A5ECharts 具体使用方法可以查看：http://echarts.baidu.com/doc/start.html 主要就是以下几个步骤： 1、为ECharts准备一个具备大小（宽高）的Dom。 2、新建标签引入模块化单文件echarts.js 3、为刚刚准备好的dom填充数据 var myChartGrade = echarts.init(document.getElementById('chart_grade')); myChartGrade.showLoading({ text: '正在努力的读取数据中...', effect : 'whirling', }); var option_grade = { title : { text: '应用分级', subtext: '维护说明', sublink:'http://****/app-grade-magagement' }, tooltip : { trigger: 'axis' }, legend: { data:['本周','上周'] }, toolbox: { show : true, feature : { mark : {show: false}, dataView : {show: true, readOnly: true}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['A级','B级','C级','D级'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'本周', type:'bar', itemStyle : { normal: {label : {show: true, position: 'top'},color: ['#87CEEB']}}, data:[40.0, 50.0, 40.0, 40.0] }, { name:'上周', type:'bar', itemStyle : { normal: {label : {show: true, position: 'top'},color: ['#DEB887']}}, data:[40.0, 40.0, 40.0, 40.0] } ] }; myChartGrade.setOption(option_grade); 以上代码就能渲染出一个设定好的echart图表。但是web项目势必要从后端取数据，然后在前端通过图形展示出来。所以要从后端获取图表数据。 从上面代码中可以看出，只要我们从后端g构造一个option，然后传给前端，前端把接收到的option设置给chart就可以展示数据了，那么接下来介绍如何在后端构造option。 二、后端数据的生成 增加依赖（http://git.oschina.net/free/ECharts）： com.github.abel533 ECharts 2.2.6 构造一个option。 /** * 生成[应用分级]的柱状图 * @return */ public static Option getBarOptionForGrade(Map data,String dept){ Option option = new Option(); option.title(dept + "-应用分级"); option.title().subtext("维护说明").sublink(); option.tooltip(Trigger.axis); option.legend().data("本周", "上周"); option.calculable(true); option.xAxis(new CategoryAxis().data("A级", "B级", "C级", "D级")); option.yAxis(new ValueAxis()); Bar bar = new Bar("本周"); bar.data(data.get("gradeA"), data.get("gradeB"), data.get("gradeC"), data.get("gradeD")); Bar bar2 = new Bar("上周"); bar2.data(data.get("lastWeekGradeA"), data.get("lastWeekGradeB"), data.get("lastWeekGradeC"), data.get("lastWeekGradeD")); option.series(bar, bar2); return option; } 通过ajax异步请求将数据返回到前端并展示出来。 > jQuery.ajax('json/availabilityReportGenerate.json?dept=$!dept&grade=$!grade&flag=grade', { type:'POST', success: function(res){ if(res.result=="success"){ myChartGrade.hideLoading(); myChartGrade.setOption(res.optionData); }else{ alert(res.mess); } }, error:function(){ alert("大爷，数据加载不到咯！~"); } }); ajax请求的java类如下 public class AvailabilityReportGenerate { @Autowired private AvailabilityReoprtService availabilityReoprtService; public void execute( @Param("dept") String dept, @Param("flag")String flag, @Param("grade") String grade, TurbineRunData rundata, Context context) throws IOException, ServletException { Map optionString = null; JSONObject jsonObject = new JSONObject(); if(StringUtils.isBlank(dept)||StringUtils.isBlank(grade)||StringUtils.isBlank(flag)){ jsonObject.put("result", "fail"); jsonObject.put("mess","参数不全！无法展示详细数据！"); context.put("json",jsonObject.toJSONString()); }else if(!tairService.isPKeyExist(SLA_PKEY_PERFIX + StringUtils.upperCase(dept) + "_" + StringUtils.upperCase(grade))){ jsonObject.put("result", "fail"); jsonObject.put("mess","数据不存在！请检查参数！"); context.put("json",jsonObject.toJSONString()); }else{ if(StringUtils.equals("grade", flag)){ Option option = EchartOptionGenerator.getBarOptionForGrade(availabilityReoprtService.getOptionGradeData(dept,grade),dept); jsonObject.put("result", "success"); jsonObject.put("optionData", option); context.put("json",jsonObject.toJSONString()); } } } } 三、事件监听 引入config.js文件 定义函数 function eConsole(param) { alert(JSON.stringify(param)); //window.location.href="http://www.alibaba.com"; } 事件绑定 mychartAAvg.on(echarts.config.EVENT.CLICK, eConsole);
-
友好的alert function sAlert(str){ var msgw,msgh,bordercolor; msgw=400;//Width msgh=100;//Height titleheight=25 //title Height bordercolor="#336699";//boder color titlecolor="#99CCFF";//title color var sWidth,sHeight; sWidth=document.body.offsetWidth; sHeight=screen.height; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#777"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div") msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "fixed"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; var title=document.createElement("h4"); title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " + bordercolor; title.style.height="18px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.style.cursor="pointer"; title.innerHTML="关闭"; title.onclick=function(){ document.body.removeChild(bgObj); document.getElementById("msgDiv").removeChild(title); document.body.removeChild(msgObj); } document.body.appendChild(msgObj); document.getElementById("msgDiv").appendChild(title); var txt=document.createElement("p"); txt.style.margin="1em 0" txt.setAttribute("id","msgTxt"); txt.innerHTML=str; document.getElementById("msgDiv").appendChild(txt); }
