实现从数据库中取得数据，再把数据传给画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. 无焦点下获取条码枪返回值的Hook（再次改良版）

    针对上一个版本再次改良,上除掉无用代码,新手绝对可以看懂! using System; using System.Collections.Generic; using System.Linq; usi ...

  2. webpack进阶--打包

    上一片博文主要让大家了解下究竟webpack是干什么的,明显它是专注于打包的. gulp  和  webpack  的区别 gulp,要求我们一步步写task(es6编译.css压缩.图片压缩.打包. ...

  3. tweenMax学习笔记

    tweenMax是一款缓动插件,能实现很多牛逼的效果,在网上看了些demo,确实很吊,虽说很多用CSS3也能做出来,但是技多不压身,学之. 网上的demo还是很多的,但是资料不多,唯一能够让我有思绪的 ...

  4. B-树(B+树) 学习总结

    一,B-树的定义及介绍 为什么会有B-树? 熟悉的树的结构有二叉树查找树或者平衡二叉树……平衡二叉树保证最坏情况下各个操作的时间复杂度为O(logN),但是为了保持平衡,在插入或删除元素时,需要进行旋 ...

  5. vue-cli构建项目使用 less

    在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装. 第一步:安装 npm install less less- ...

  6. 《翻译》PEP 380 – 委托子生成器语法

     PEP 380 – 委托子生成器语法 翻译自: https://www.python.org/dev/peps/pep-0380/ 摘要 一项新的语法被提出了:生成器委托其部分操作给另一个生成器.委 ...

  7. 浅谈 js 下 with 对性能的影响

    这几天多次看到有博主们在写 with 的文章,这货确实非常方便,但是却是个性能杀手,所以一直都是上不得台面的.那么他究竟会让效率低下到什么程度呢?先来看下 with 是如何的便捷吧.. // 正常调用 ...

  8. Javascript你不知道的那些事！（数字计算篇-变态篇）无意中聊天发现的一些奇怪的事情

    javascript:alert(0.1 + 0.2) 如果看到这样一道题你会怎么思考了!大家肯定第一反应0.3,但是考虑到我已经这样问了!那么幼稚的答案我会专门写篇文章吗 然后人就开始折磨自己了会不 ...

  9. 20155237 2016-2017-2 《Java程序设计》第7周学习总结

    20155237 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Lambda去重复,回忆D ...

  10. 运动规划——PT and PVT 模式

    最近项目成员在做机器人上层开发时,经常说到PT模式和PVT模式.一直没搞懂这两种模式的实际差别.上网检索进行学习...... ref link:https://blog.csdn.net/m0_376 ...