实现从数据库中取得数据，再把数据传给画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连接数据库）的更多相关文章

  1. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  2. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

  3. javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断

    和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...

  4. 利用ajax异步校验验证码（转）

    利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...

  5. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  6. asp.net mvc3 利用Ajax实现局部刷新

    1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...

  7. [前端引用] 利用ajax实现类似php include require 等命令的功能

    利用ajax实现类似php中的include.require等命令的功能 最新文件下载: https://github.com/myfancy/ajaxInclude 建议去这里阅读readme-2. ...

  8. 利用Ajax把前端的数据封装成JSON格式发送到服务器端并写成XML格式在服务器的硬盘上

    1.首先要在前端把要发送的东西(这里是一个实例化的car对象)都准备好,利用Ajax发送到服务器端,代码如下: <html xmlns="http://www.w3.org/1999/ ...

  9. Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)

    原文:Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇) 老话说的好:好记心不如烂笔头! 本着这原则,我把最近工作中遇到的jquery利用ajax调用web服务的 ...

随机推荐

  1. Python中的requests模块注意事项

    主要是说requests.post()方法, 参数: url :  这就不解释了 data:  如果传入的是字典类型,则字典在发出请求时会自动编码为表单形式,表单形式会将字典中的键和值进行一些操作: ...

  2. Nested Loops(嵌套循环)

    先扫描驱动表的(外表),外表的每一行驱动内表,然后匹配,所以nest loops不是主要依赖于内表有多少行,而是非常依赖于驱动表到底有多少行参与nested loops,因为驱动表(或者准确的说是驱动 ...

  3. 初学Python-搞了一个linux用户登录监测小工具

    这几天突发奇想,想学习一下Python.看了点基础,觉得有点枯燥,所以想搞点什么.想了想,就随便弄个检测Linux用户登录的小工具吧~ 首先,明确一下功能: 1.能够捕获 linux 用户登录的信息. ...

  4. Spring MVC 中 @ModelAttribute 注解的妙用

    Spring MVC 中 @ModelAttribute 注解的妙用 Spring MVC 提供的这种基于注释的编程模型,极大的简化了 web 应用的开发.其中 @Controller 和 @Rest ...

  5. 【转载】RESTful API 设计指南

    作者: 阮一峰 日期: 2014年5月22日 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制 ...

  6. 01 uni-app框架学习：项目创建及底部导航栏tabBar配置

    1.创建一个项目类型选择uniapp 2. pages里新建3个页面如下 3.在pages.json中配置底部导航tabBar 效果展示:

  7. 【ARTS】01_06_左耳听风-20181217~1223

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  8. VELT-0.1.5开发：使用kgdb调试Linux内核【转】

    转自:http://demo.netfoucs.com/lights_joy/article/details/44106589 VELT的全称是Visual EmbedLinuxTools,它是一个与 ...

  9. Linux内核中进程上下文、中断上下文、原子上下文、用户上下文的理解【转】

    转自:http://blog.csdn.net/laoliu_lcl/article/details/39972459 进程上下文和中断上下文是操作系统中很重要的两个概念,这两个概念在操作系统课程中不 ...

  10. mac ssh 自动登陆设置

    1.首先找到.ssh目录 一般在用户名目录下. ls -a查看 如果没有就重新创建一个 chennan@bogon :mkdir .ssh chennan@bogon 查看当前的 bogon:.ssh ...