实现从数据库中取得数据，再把数据传给画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. Oracle 11g DRCP配置与使用

    Oracle 11g DRCP配置与使用Oracle 11g推出了驻留连接池(Database Resident Connection Pool)特性,提供了数据库层面上的连接池管理机制,为应对高并发 ...

  2. tmux终端复用/tmate终端共享

    目录 tmux tmate tmux 一种终端复用工具,是终端中的窗口管理器.常见的一种用途是在关闭父shell时保持程序运行(常用于ssh访问断开连接后保持运行).linux上可通过包管理器进行安装 ...

  3. python 爬虫 scrapy1_官网教程

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  4. Hadoop生态圈-Kafka的旧API实现生产者-消费者

    Hadoop生态圈-Kafka的旧API实现生产者-消费者 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.旧API实现生产者-消费者 1>.开启kafka集群 [yinz ...

  5. Object和泛型

    这俩东东呢实现的效果是一样的,但是它们俩的效率不一样,原理也不一样.直接说结论吧,泛型比Object好用,效率高.因为Object有一个装箱和拆箱的过程,倘若是很多的数据那效率就低到不行了,而泛型没有 ...

  6. C语言复习---选择法排序

    选择排序也是一种简单直观的排序算法 它的工作原理很容易理解:初始时在序列中找到最小(大)元素,放到序列的起始位置作为已排序序列:然后,再从剩余未排序元素中继续寻找最小(大)元素,放到已排序序列的末尾. ...

  7. C#获取文件超大图标256*256(转）

    从Bing搜索得到,保存于此 using System; using System.Collections.Generic; using System.Linq; using System.Text; ...

  8. 【原创】backbone1.1.0源码解析之View

    作为MVC框架,M(odel)  V(iew)  C(ontroler)之间的联系是必不可少的,今天要说的就是View(视图) 通常我们在写逻辑代码也好或者是在ui组件也好,都需要跟dom打交道,我们 ...

  9. [原] eclipse 无法找到 run as junit

    碰见这个问题,折磨我好一下! 问题根源和解决方式 第一,保证有junit jar包,基本不会犯这错误: 第二,保证你这个类是Source可编译文件,要是这个类在普通文件夹下,工程是不会编译它的,也就找 ...

  10. 【两分钟视频教程】如何使用myeclipse在mac本机运行iOS配套的服务器

    如何使用myeclipse在mac本机运行iOS配套的服务器