今天的收获真的挺多的,今天一天就完成了Ajax的使用,并可以熟练掌握使用它的方法,完成了echarts图表联动,还有Hadoop解决了hbase总是不能及时启动的bug(有的时候可以启动,有的时候不行,很佛性)
所以,看看今天都做了写什么吧
1.ajax的异步同传(传String类型,传List类型,传JavaBean类型,json)
至于传String类型,传List类型,传JavaBean类型都没啥难度,当然json也没有什么难度,发几张截图吧!
json:(json将javaBean转换)
public static void main(String []args) { People people=new People(); people.setId(10); people.setName("亮亮"); people.setAge(10); //使用jackson转换为json //1、使用JSONObject JSONObject jsonObject=JSONObject.fromObject(people); //2、使用JSONArray JSONArray array=JSONArray.fromObject(people); System.out.println(jsonObject.toString()); System.out.println("----------------------------------"); System.out.println(array.toString()); }
Ajax异步同传:
以前一直用的是jsp,但是最近需要实现可视化,jsp无法实现要求,所以在做可视化的时候由于知识不足,再加上echarts需要的就是ajax与jQuery的规则,但是很庆幸的是,通过这两天的学习,
最终还是把可视化啃下来了。
具体的思路很简单:将数据库的内容加入的echarts的data中,怎么加?这里就需要json了!
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public static JSONArray check_num(String state,String num) { Connection con=null; PreparedStatement pstmt=null; ResultSet rs=null; ResultSet rs1=null; int nums=Integer.parseInt(num); try { con=Dbutil.getConnection(); String sql="select "+state+" from data1 group by "+state+""; //String sql0="select distinct("+state+") from all_institution"; System.out.println(sql); pstmt=con.prepareStatement(sql); rs=pstmt.executeQuery(); ArrayList<String> list=new ArrayList<>(); JSONArray jsonArray=new JSONArray(); //String str="["; while(rs.next()) { list.add(rs.getString(1)); System.out.println("值:"+rs.getString(1)); } for (int i=0;i<list.size();i++) { JSONObject jsonObject=new JSONObject(); String sql1="SELECT COUNT("+state+") FROM data1 WHERE "+state+"='"+list.get(i)+"'"; System.out.println(sql1); pstmt=con.prepareStatement(sql1); rs1=pstmt.executeQuery(); rs1.next(); System.out.println(list.get(i)); System.out.println("111"+rs1.getString(1)); jsonObject.put("name", list.get(i)); jsonObject.put("num", rs1.getString(1)); jsonArray.add(jsonObject); } System.out.println(jsonArray.toString()); return jsonArray; } catch (Exception e) { // TODO: handle exception }finally { Dbutil.closeAll(con, pstmt, rs); } return null;
既然从数据库中获取到了数据并成功转化为了json,然后需要的就是在servlet响应前端发来的请求,并返回一个json,为前端提供数据
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String state=request.getParameter("state"); String num=request.getParameter("num"); System.out.println(state+num); JSONArray jsonArray=new JSONArray(); jsonArray=DB_data.check_nums(state, num); System.out.println(jsonArray.toString()); response.getWriter().write(jsonArray.toString());
到这里,也到了最难的地方了,那就是为echarts插入数据。说到这里,该怎么插?用什么插?
怎么插------------------------------当然使用代码插了,从servlet中获取到的json,数据很多,我们总不能直接告诉echargs按照我们的要求做吧!这里就需要个人的安排了
你可以通过jquery的遍历插,也可以自己写一个for循环自己搞,这里我选择了后者,代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
function(data){ //$(".result-tab").empty(); // var json=JSON.parse(data); var json=data; console.log(json); var size=json.length; if(num<size){ size=num; } var names=[]; var nums=[]; var num2=[]; var i=0; for(i=0;i<size;i++){ names.push(json[i].name); nums.push({value:""+json[i].num+"",name:""+json[i].name+""}); num2.push(json[i].num); }
这里是不完整的代码,所以这里也只是提供一个思路,我是这样写的。
那么这里已经将从servlet的数据转化了,那么下面我们需要做的就是将数据插入,这里我也不知道是怎么弄得,查阅了好多人的代码,他们都是直接使用data后直接跟一个数组
至于如何实现的不重要,现在我可以更具需求自定义的完成一些图标变动的实例。
经验与教训:在几天之前我就知道echarts的学习只要知识宽度跟得上就可以很快的适应并使用它,在我花费数天,突击完Ajax与jQuery还有json(其实目前我只是掌握了ajax的使用,其他的都是东平西凑的凑出来的),我相信在明天学习完jQuery之后,回过头再看看echarts肯定会有不一样的感受,我应该会觉得echarts很简单,为什么前几天那么沙比的没搞出来,这就好像高Hadoop的时候一样,刚开始一脸懵逼,到现在不也可以独立自主的修复bug吗,甚至我可以说,在整个软工我配置Hadoop是最快的,这也验证了,在编程的时候每个人都是公平的,一次没搞懂,那就来两次,三次,四次,总会有那么一次会让你觉得原来如此简单。
说了这么多,其实万变不离其宗,在面对一个需求的时候如果你一脸蒙蔽,千万不要着急学习相关知识,如果你在学习相关知识的时候还是一脸懵逼,也不要着急,因为你连基础都没打牢,只能说你还是太赖,不早早学,非要等到用的时候才发现自己有这么多的东西不懂,不会。
!!!!!!!!!!为了今后尽可能少的求别人,多学,多学,多学!!!!!!!!!!!!!!!!