jqplot利用ajax传值画图表（利用jsp连接数据库）

实现从数据库中取得数据，再把数据传给画jqplot的jsp界面！jsp界面再进行画图，画出我们所需的图表！

有两个jsp界面，7-12.jsp用来连接数据库，并把数据传给ajaxauto.jsp，ajaxauto.jsp接收数据并画出图表！

7-12.jsp

 <%@ page language="java" pageEncoding="UTF-8"%>

 <%@ page language="java" %>

 <%@ page import="com.mysql.jdbc.Driver" %>

 <%@ page import="java.sql.*" %>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%

 //驱动程序名

 String driverName="com.mysql.jdbc.Driver";

 //数据库用户名

 String userName="root";

 //密码

 String userPasswd="root";

 //数据库名

 String dbName="login";

 //表名

 String tableName="meter_param_data";

 //联结字符串

 String url="jdbc:mysql://localhost/"+dbName+"?user="+userName+"&password="+userPasswd;

 Class.forName("com.mysql.jdbc.Driver").newInstance();

 Connection connection=DriverManager.getConnection(url);

 Statement statement = connection.createStatement();

 //String sql="SELECT * FROM "+tableName;

 String sqlcount ="select COUNT(*) from Meter_param_Data where Meter_param_Id =1";

 ResultSet rs = statement.executeQuery(sqlcount);

 //设置查询的初始与结束行数

 rs.next();

 int MpDIbegin=rs.getInt("COUNT(*)")-7;

 int MpDIend=rs.getInt("COUNT(*)");

 String sql = "select * from Meter_param_Data where Meter_param_Data_Id between "+MpDIbegin+" and "+MpDIend+"";

 rs = statement.executeQuery(sql); 

 //获得数据结果集合

 ResultSetMetaData rmeta = rs.getMetaData();

 //确定数据集的列数，亦字段数

 int numColumns=rmeta.getColumnCount();

 String dataYear = "[[";

 //String dataYear ="";

 //[['1/1/2008', 42], ['2/14/2008', 56], ['3/7/2008', 39], ['4/22/2008', 81]];

 // 输出每一个数据值

 while (rs.next()) {

         //获取时间

         String s=rs.getString("time");

         //对时间进行以空格分成数组

         String ss[]=s.split(" ");

         //        out.print(ss[0]);

         //对获取的时间行进以-分成数组

         String mdy[]=ss[0].split("-");

         //对月进行判断，如果是以0开头则取第二个数

         if(mdy[1].charAt(0)=='0'){

             mdy[1]=String.valueOf(mdy[1].charAt(1));

         }

         //对日进行判断，如果是以0开头则取第二个数

         if(mdy[2].charAt(0)=='0'){

             mdy[2]=String.valueOf(mdy[2].charAt(1));

         }

         //输出一些资料

 //        out.print("mdy[1]:"+mdy[1]+" ");

 //        out.print("mdy[1].charAt(0):"+mdy[1].charAt(0)+" ");

 //        out.print("mdy[1].charAt(1):"+mdy[1].charAt(1));

 //        out.print("月:"+mdy[1]+" ");

 //        out.print("日:"+mdy[2]+" ");

 //        out.print("年:"+mdy[0]+" ");

         //对获取的数据进行封装成字符串

         dataYear = dataYear +"'"+ mdy[1]+"/"+mdy[2]+"/"+mdy[0]+ "', " + rs.getString("Data") + "],[";

 //        dataYear = dataYear +mdy[1]+"/"+mdy[2]+"/"+mdy[0]+ ","+rs.getString("Data")+",";

 //        out.print(rs.getString("Data")+" ");

 //        out.print("<BR>");

 }

 int dylength = dataYear.length();

 // 减去生成的String后两个字符

 dataYear = dataYear.substring(0, dylength - 2);

 //在结尾加上结束符

 dataYear = dataYear + "]";

 //输出<div class="example-plot" id="chart2"></div>

 //输出生成的字符串

 response.setContentType("text/xml; charset=UTF-8");

 response.setHeader("Cache-Control","no-cache");

 out.println("<response>");

 for(int i=0;i<3;i++){

 //out.print("str为："+ strdiv);

 out.print("<dataYear>"+dataYear+

            "</dataYear>");

 //out.print(dataYear);

 out.println("<name>"+(int)(Math.random()*10)+

            "型笔记本</name>");

 out.println("<count>" +(int)(Math.random()*100)+ "</count>");

 }

 out.println("</response>");

 out.close();

 rs.close();

 statement.close();

 connection.close();

 %>

ajaxauto.jsp

 <%@include file="jqplotinclude.txt"%>

 <%@ page language="java" pageEncoding="UTF-8"%>

 <%@ taglib prefix="s" uri="/struts-tags"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

     <title>My JSP 'autoRefresh.jsp' starting page</title>

     <meta http-equiv="pragma" content="no-cache">

     <meta http-equiv="cache-control" content="no-cache">

     <meta http-equiv="expires" content="0">

     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

     <meta http-equiv="description" content="This is my page">

     <!-- Additional plugins go here -->

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.logAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>

     <script class="include" type="text/javascript" src="js/jQuery/jqPlot/plugins/jqplot.barRenderer.min.js"></script>

     <!--

     <link rel="stylesheet" type="text/css" href="styles.css">

     -->

   </head>

   <script language="javascript">

   function createjqplot(){

       //   var line2 = <s:property value="type"/>;

        var line2=<%=session.getAttribute("dataYear") %>;

 //         var line2 =XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

          var plot2 = $.jqplot('chart2', [line2], {

            axes: {

              xaxis: {

                renderer: $.jqplot.DateAxisRenderer,

                label: 'Incliment Occurrance',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                tickRenderer: $.jqplot.CanvasAxisTickRenderer,

                tickOptions: {

                    // labelPosition: 'middle',

                    angle: 15

                }

              },

              yaxis: {

                label: 'Incliment Factor',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer

              }

            }

          });

      }

 var XMLHttpReq;

      //创建XMLHttpRequest对象

     function createXMLHttpRequest() {

         if(window.XMLHttpRequest) { //Mozilla 浏览器

             XMLHttpReq = new XMLHttpRequest();

         }

         else if (window.ActiveXObject) { // IE浏览器

             try {

                 XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

             } catch (e) {

                 try {

                     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

                 } catch (e) {}

             }

         }

     }

     //发送请求函数

     function sendRequest() {

         createXMLHttpRequest();

         var url = "7-12.jsp";

         XMLHttpReq.open("GET", url, true);

         XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

         XMLHttpReq.send(null);  // 发送请求

     }

     // 处理返回信息函数

     function processResponse() {

         if (XMLHttpReq.readyState == 4) { // 判断对象状态

             if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息

                 DisplayHot();

             //一定时间后重新加载sendRequest()方法

                 setTimeout("sendRequest()", 3000);

             } else { //页面不正常

                 window.alert("您所请求的页面有异常。");

             }

         }

     }

     function DisplayHot() {

         var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;

         var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

         document.getElementById("product").innerHTML = name;

         document.getElementById("count").innerHTML = count;

         var dataYear = XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

     //    document.getElementById("data").innerHTML =dataYear;

 //alert(<%=session.getAttribute("dataYear") %>);

 //alert(dataYear);

         var data =eval(dataYear);

 //alert(data);

         var line2 =data;

 // alert(line2);

 //         var line2 =XMLHttpReq.responseXML.getElementsByTagName("dataYear")[0].firstChild.nodeValue;

         document.getElementById("chart2").innerHTML = "";

          var plot2 = $.jqplot('chart2', [line2], {

            axes: {

              xaxis: {

                renderer: $.jqplot.DateAxisRenderer,

                label: 'Incliment Occurrance',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                tickRenderer: $.jqplot.CanvasAxisTickRenderer,

                tickOptions: {

                    // labelPosition: 'middle',

                    angle: 15

                }

              },

              yaxis: {

                label: 'Incliment Factor',

                labelRenderer: $.jqplot.CanvasAxisLabelRenderer

              }

            }

          });

     }

 </script>

 <body onload =sendRequest()>

 <table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200    bgColor=#f5efe7 border=0>

 <TR>

    <TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>正在热卖的笔记本</B> </TD>

 </TR>

 <tr>

    <td height="20"> 型号：</td>

    <td height="20" id="product"> </td>

 </tr>

 <tr>

    <td height="20"> 销售数量：</td>

    <td height="20" id="count"> </td>

 </tr>

 </table>

 <div class="example-plot" id="chart2"></div>

 <input type="button" value="画图" onclick="createjqplot()"/>

 </body>

 </html>

一开始是使用

<%=session.setAttribute("dataYear",dataYear) %>

<%=session.getAttribute("dataYear") %>

来传与接收数据的！但这种办法只能接收第一次传过来的数据！就是数据库有新的数据了，图表虽然有刷新，但并不能刷出新的数据！后来不用这个了！

在使用新的办法传与接收时出现了数据值属性不合理的问题！弄了我好久，也有记录下来，为：http://www.cnblogs.com/CccccYj/p/3279394.html

jqplot利用ajax传值画图表（利用jsp连接数据库）的更多相关文章

Struts2&period;5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)
利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...
javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
利用ajax异步校验验证码（转）
利用ajax异步校验验证码示例结果如图所示具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...
nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
asp&period;net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法首先在_Layout.cshtml文件中加载运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
[前端引用] 利用ajax实现类似php include require 等命令的功能
利用ajax实现类似php中的include.require等命令的功能最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...
利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上
1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...
Jquery利用ajax调用asp&period;net webservice的各种数据类型(总结篇)
原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...

随机推荐

Delphi中DBChart的数据库应用
一:属性相关:Series选项: (1)Format页(数据柱的风格) 在Color Each中打勾,就可使用多种颜色显示,color按钮用于设置颜色,Style用于设置图表的风格(Rectangle ...
volley&lowbar;缓存介绍
离线缓存就是在网络畅通的情况下将从服务器收到的数据保存到本地,当网络断开之后直接读取本地文件中的数据.如Json 数据缓存到本地,在断网的状态下启动APP时读取本地缓存数据显示在界面上,常用的APP( ...
任督二脉之Shell中的正则表达式
VBird说学习Linux,掌握了Shell和正则就相当于打通了任督二脉,此后能力的成长才会突飞猛进. Shell的基础学习之前已经总结了一篇博客:http://www.cnblogs.com/jyz ...
android 2&period;2 videoView 诡异bug
最近遇到一个问题,在2.2系统上,公司项目中使用VideoView,第一次播放正常,第二次播放黑屏. 由于公司项目使用lua + android 原生,所以试了下原生的android 的VideoVi ...
关于显示gif的一些方法与讨论
http://www.2cto.com/kf/201404/292468.html http://www.eoeandroid.com/forum.php?mod=viewthread&tid ...
免费CDN
什么是CDN? CDN (Content Delivery Network) ,CDN 是包含可分享代码库的服务器网络. CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用.与将 ...
XCODE快捷键和功能汇总篇（不断更新）
快捷键 command+b(build) 编译 command+r(run) 运行编译后程序鼠标放在代码元素上,按command然后单击,可以看到元素的属性
Asp&period;net 将DataTable 或者DataSet 转换为Json 格式
Web 开发中,将从数据库中取到的数据直接转换为 Json 格式的数据,在前台通过Ajax 无刷新显示在界面上,下面提供将DataTable 或者DataSet 转换为Json 的方法 /// &lt ...
jQuery获取表单各元素的值
radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...
新学Linux时遇到的一些问题
1.如何进入到Linux的命令终端 (1)按ctrl+alt+t (2)按ctrl+alt+(F1-F6都可以),按ctrl+alt+F7退出 2.按ctrl+alt+(F1-F6)进入命令终端,登录 ...