cakephp中使用ajax获得数据，动态折线显示

最新推荐文章于 2017-10-24 15:10:27 发布
最新推荐文章于 2017-10-24 15:10:27 发布
阅读量1.4k 收藏
点赞数
分类专栏： 网站 文章标签： cakephp ajax 数据 动态 折线图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaixm/article/details/50279289
版权

新建ShowController.php:

<?php

namespace App\Controller;

use App\Controller\AppController;

class ShowController extends AppController {
	
	
	
	public function initialize()
	{
		parent::initialize();
		$this->loadComponent('RequestHandler');
		$this->loadComponent('Flash'); // Include the FlashComponent
		
	}
	
	public function index() {
		
// 		$this->loadModel('Mydata');
// 		$this->loadModel('Offdata');
// 		if ($this->request->is('ajax')) {
			
// 			$this->autoRender = false;
// 			$id = $_POST ['id'];
// 			$results = $this->Temperature->find ( 'all', array (
// 					'fields' => array (
// 							'Temperature.time',
// 							'Temperature.temp' 
// 					),
// 					'conditions' => array (
// 							'id >' => $id 
// 					) 
// 			) );
// 			$arr = array();
// 			$arr[] = $id;
// 			foreach ($results as $result){
// 				$arr[] = $result->time;
// 				$arr[] = $result->temp;
// 			}
// 			if (count($arr) > 1) {
// 				echo json_encode ( $arr );
// 			}
// 		}			
	}
	
	public function getMyTemperatureData()
	{
		$this->loadModel('Devicesdatas');
		$user_id=$this->request->session()->read('User.id');
		if ($this->request->is('ajax')) {				
			$this->autoRender = false;
			$id = $_POST ['id'];
			$results = $this->Devicesdatas->find ( 'all', array (
					'fields' => array (
							'Devicesdatas.created',
							'Devicesdatas.temperature'
					),
					'conditions' => array (
							'id >' => $id,
							'user_id' => $user_id
					)
			) );
			$arr = array();
			//$arr[] = $id;
			foreach ($results as $result){
				$arr[] = $result->created;
				$arr[] = $result->temperature;
			}
			if (count($arr) > 0) {
				echo json_encode ( $arr );
			}
		}
	}
	
	public function getOffTemperatureData()
	{
		//$user_id=$this->request->session()->read('User.id');
		$this->loadModel('Officialdatas');
		if ($this->request->is('ajax')) {
			$this->autoRender = false;
			$id = $_POST ['id'];
			$results = $this->Officialdatas->find ( 'all', array (
					'fields' => array (
							'Officialdatas.created',
							'Officialdatas.temperature'
					),
					'conditions' => array (
							'id >' => $id,
							//'user_id' => $user_id
					)
			) );
			$arr = array();
			//$arr[] = $id;
			foreach ($results as $result){
				$arr[] = $result->created;
				$arr[] = $result->temperature;
			}
			if (count($arr) > 0) {
				echo json_encode ( $arr );
			}
		}
	}
	
	public function getMyHumidityData()
	{
		$this->loadModel('Devicesdatas');
		$user_id=$this->request->session()->read('User.id');
		if ($this->request->is('ajax')) {
			$this->autoRender = false;
			$id = $_POST ['id'];
			$results = $this->Devicesdatas->find ( 'all', array (
					'fields' => array (
							'Devicesdatas.created',
							'Devicesdatas.humidity'
					),
					'conditions' => array (
							'id >' => $id,
							'user_id' => $user_id
					)
			) );
			$arr = array();
			//$arr[] = $id;
			foreach ($results as $result){
				$arr[] = $result->created;
				$arr[] = $result->humidity;
			}
			if (count($arr) > 0) {
				echo json_encode ( $arr );
			}
		}
	}
	
	public function getOffHumidityData()
	{
		$this->loadModel('Officialdatas');
		//$user_id=$this->request->session()->read('User.id');
		if ($this->request->is('ajax')) {
			$this->autoRender = false;
			$id = $_POST ['id'];
			$results = $this->Officialdatas->find ( 'all', array (
					'fields' => array (
							'Officialdatas.created',
							'Officialdatas.humidity'
					),
					'conditions' => array (
							'id >' => $id,
							//'user_id' => $user_id
					)
			) );
			$arr = array();
			//$arr[] = $id;
			foreach ($results as $result){
				$arr[] = $result->created;
				$arr[] = $result->humidity;
			}
			if (count($arr) > 0) {
				echo json_encode ( $arr );
			}
		}
	}
}



在template下新建Show文件夹，在Show文件夹下新建index.ctp文件： 

<head>
<?php echo $this->Html->script('jquery'); ?>
<?php echo $this->Html->script('highcharts'); ?>
<?php echo $this->Html->link('View image', array(
    'controller' => 'devicesdatas',
    'action' => 'imgview'),array(
    'font' => array('size' => '2')
    )
); ?>
<script>
 // global
 var chart1;
 var chart2;
 var id1 = 0;
 var id2 = 0;
 var id3 = 0;
 var id4 = 0;
 var time = new Date();
 time = 0;
 /**
 * Request data from the server, add it to the graph and set a timeout to request again
 */
 function requestMyTemperatureData(){
 	$.ajax({
        url: 'show/getMyTemperatureData',
		type: 'POST',
		data: {"id": id1},
		dataType:'json',
        success: function(data) {
		//alert(data.length);
            var series = chart1.series[0],
                shift = series.data.length > 20; // shift if the series is longer than 20
            // add the point
			if(data != null){
				if(data.length > 2){
					var i = 0;
					while(data != null && i < data.length)
					{
						var x = data[i++], // current time
							y = data[i++];	//mytemperature
							//z = data[i++];	//myhumidity
						id1++;
						x = Date.parse(x);
						chart1.series[0].addPoint([x,y], true, shift);	
						//chart2.series[0].addPoint([x,z], true, shift);						
					}
				}else{
						var x = data[0], // current time
							y = data[1];	//mytemperature
							//z = data[i++];	//myhumidity
						id1++;
						x = Date.parse(x);
						chart1.series[0].addPoint([x,y], true, shift);	//*/
						//chart2.series[0].addPoint([x,z], true, shift);		
				}
				setTimeout(requestMyTemperatureData, 1000);
			}else{
				setTimeout(requestMyTemperatureData, 1000);
			}
               
        },
        cache: false
    });
 }
 function requestOfficalTemperatureData(){
 	$.ajax({
        url: 'show/getOffTemperatureData',
		type: 'POST',
		data: {"id": id2},
		dataType:'json',
        success: function(data) {
		//alert(data.length);
            var series = chart1.series[1],
                shift = series.data.length > 30; // shift if the series is longer than 20
            // add the point
			if(data != null){
				if(data.length > 2){
					var i = 0;
					while(data != null && i < data.length)
					{
						var x = data[i++], // current time
							y = data[i++];	//mytemperature
							//z = data[i++];//myhumidity
						id2++;
						x = Date.parse(x);
						y = -y;
						//z = -z;
						chart1.series[1].addPoint([x,y], true, shift);
						//chart2.series[1].addPoint([x,z], true, shift);						
					}
				}else{
						var x = data[0], // current time
							y = data[1];	//mytemperature
							//z = data[i++];//myhumidity
						id2++;
						x = Date.parse(x);
						y = -y;
						//z = -z;
						chart1.series[1].addPoint([x,y], true, shift);	//*/
						//chart2.series[1].addPoint([x,z], true, shift);		
				}
				setTimeout(requestOfficalTemperatureData, 1000);
			}else{
				setTimeout(requestOfficalTemperatureData, 1000);
			}
               
        },
        cache: false
    });
 }
function requestTemperatureData() {
	requestMyTemperatureData();
	requestOfficalTemperatureData(); 	
}

 function requestMyHumidityData(){
 	$.ajax({
        url: 'show/getMyHumidityData',
		type: 'POST',
		data: {"id": id3},
		dataType:'json',
        success: function(data) {
		//alert(data.length);
            var series = chart1.series[0],
                shift = series.data.length > 20; // shift if the series is longer than 20
            // add the point
			if(data != null){
				if(data.length > 2){
					var i = 0;
					while(data != null && i < data.length)
					{
						var x = data[i++], // current time
							y = data[i++];	//mytemperature
							//z = data[i++];	//myhumidity
						id3++;
						x = Date.parse(x);
						chart2.series[0].addPoint([x,y], true, shift);	
						//chart2.series[0].addPoint([x,z], true, shift);						
					}
				}else{
						var x = data[0], // current time
							y = data[1];	//mytemperature
							//z = data[i++];	//myhumidity
						id3++;
						x = Date.parse(x);
						chart2.series[0].addPoint([x,y], true, shift);	//*/
						//chart2.series[0].addPoint([x,z], true, shift);		
				}
				setTimeout(requestMyHumidityData, 1000);
			}else{
				setTimeout(requestMyHumidityData, 1000);
			}
               
        },
        cache: false
    });
 }
 function requestOfficalHumidityData(){
 	$.ajax({
        url: 'show/getOffHumidityData',
		type: 'POST',
		data: {"id": id4},
		dataType:'json',
        success: function(data) {
		//alert(data.length);
            var series = chart1.series[1],
                shift = series.data.length > 20; // shift if the series is longer than 20
            // add the point
			if(data != null){
				if(data.length > 2){
					var i = 0;
					while(data != null && i < data.length)
					{
						var x = data[i++], // current time
							y = data[i++];	//mytemperature
							//z = data[i++];//myhumidity
						id4++;
						x = Date.parse(x);
						y = -y;
						//z = -z;
						chart2.series[1].addPoint([x,y], true, shift);
						//chart2.series[1].addPoint([x,z], true, shift);						
					}
				}else{
						var x = data[0], // current time
							y = data[1];	//mytemperature
							//z = data[i++];//myhumidity
						id4++;
						x = Date.parse(x);
						y = -y;
						//z = -z;
						chart2.series[1].addPoint([x,y], true, shift);	//*/
						//chart2.series[1].addPoint([x,z], true, shift);		
				}
				setTimeout(requestOfficalHumidityData, 1000);
			}else{
				setTimeout(requestOfficalHumidityeData, 1000);
			}
               
        },
        cache: false
    });
 }
function requestHumidityData() {
	requestMyHumidityData();
	requestOfficalHumidityData(); 	
}


$(document).ready(function() {
	Highcharts.setOptions({                                                     
		global: {                                                               
			useUTC: false                                                       
		}                                                                       
	});
    chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            defaultSeriesType: 'spline',
            events: {
                load: requestTemperatureData
            }
        },
        title: {
            text: 'temperature'
        },
        xAxis: [{
            type: 'datetime',
			//tickInterval: 5,
           	//tickPixelInterval: 5000,
			title: {
				text: 'my temperature',
				style: {
					color: '#89A54E'
				}
            }
           // maxZoom: 20 * 1000
        },
		{
            type: 'datetime',
           	//tickPixelInterval: 100,
			opposite: true, //������ ��ʾ��ʾ���Ϸ�
			title: {
				text: 'offical temperature',
				style: {
					color: '#89A54E'
				}
            }
           // maxZoom: 20 * 1000
        }],
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'temperature',
                margin: 80
            }
        },
        series: [{
            name: 'my temperature',
            data: []
        },
		{
            name: 'offical temperature',
            data: [],
			xAxis: 1	//�ڶ���X��
        }],
		tooltip:{
		shared:true,
		crosshairs:true,
		xDateFormat: '%Y-%m-%d %H:%M:%S'
		}
    }); 
	chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            defaultSeriesType: 'spline',
            events: {
                load: requestHumidityData
            }
        },
        title: {
            text: 'humidity'
        },
        xAxis: [{
            type: 'datetime',
			//tickInterval: 5,
           	//tickPixelInterval: 5000,
			title: {
				text: 'my humidity',
				style: {
					color: '#89A54E'
				}
            }
           // maxZoom: 20 * 1000
        },
		{
            type: 'datetime',
           	//tickPixelInterval: 100,
			opposite: true, //������ ��ʾ��ʾ���Ϸ�
			title: {
				text: 'offical humidity',
				style: {
					color: '#89A54E'
				}
            }
           // maxZoom: 20 * 1000
        }],
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'humidity',
                margin: 80
            }
        },
        series: [{
            name: 'my humidity',
            data: []
        },
		{
            name: 'offical humidity',
            data: [],
			xAxis: 1	//�ڶ���X��
        }],
		tooltip:{
		shared:true,
		crosshairs:true,
		xDateFormat: '%Y-%m-%d %H:%M:%S'
		}
    }); 
	       
});
</script>
</head>

<body>
<div id="container1" style="height: 265px; min-width: 600px; background-color:#CCCCCC"></div>
<div id="container2" style="height: 265px; min-width: 600px; background-color:#CCCCCC"></div>
</body>

这样当数据库数据更新时，数据会添加到折现上，实现动态效果

凭江仙
关注
专栏目录
CakePHP使用ajax传值
12-25
cakphp关于ajax传值的方法，以及中文乱码，路径不正确等
如何在CakePHP中使用Ajax请求
般若
04-01 2101
在CakePHP的默认情况下，Controller中的action都要求有一个对应的view视图。而处理Ajax请求的action则不需要视图，本文介绍了在CakePHP中处理Ajax请求的常用方式。
cakephp jquery ajax json
zhb1208的专栏
07-13 252
简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。Cakephp1.2提供了对JSON的内置支持,主要体现在两个特殊的方法: Router::parseExtensions() 和 JavascriptHelper::object() 目标 我们要通过JQuery的$.getJSON方法,获取Cakephp...
cakephp 数据库数据页面显示
u014628095的专栏
05-11 586
<?php class AdminsController extends AppController { public $name ='Admin'; public function index() { $data = $this->Admin->find('all'); $this->set('data',$data); } }
cakephp-ajax：用于CakePHP的AJAX：用于简化处理AJAX请求的插件
01-28
通过View类映射进行自动处理，并通过设计使控制器动作在AJAX和非AJAX中均可用。 Flash消息和重定向（预防）支持。 有关此视图类和插件代码的历史记录的详细信息，请参见。 安装和文档 可能的待办事项 也许围绕自动...
攻克CakePHP系列二 表单数据显示
01-20
首先建立数据库cake_ext，并执行如下sql文： CREATE TABLE `companies` (  `id` int(11) NOT NULL auto_increment,  `company` varchar(50) NOT NULL,  `price` decimal(8,2) NOT NULL, ...
Ajax-cakephp-ajax.zip
09-17
Ajax-cakephp-ajax.zip,ajax for cakephp：一个易于处理ajax请求的插件。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不...
cakephp-cipher-behavior:使用CakePHP加密您的实体数据和此行为
05-11
使用CakePHP Security类和此行为神奇地加密实体数据。 安装 首先使用将这个插件安装到CakePHP应用程序中。 安装composer软件包的简单方法是： composer require adayth/cakephp-cipher-behavior 之后，您应该在...
CakePHP :: Ajax Demo
01-04
This is a simple demo of some of the AJAX helpers now available in CAKE. These helpers are directly modeled on Ruby On Rails. In fact, they were shamelessly ported from rails almost verbatim. You can also see some of the amazing effects available through the Prototype javascript library. This is a demo not an application. Obviously this uses far too much AJAX in nonsensical ways. 很不错的基于php+ajax的例子
Highcharts使用指南
weixin_34037515的博客
01-24 838
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
CakePHP查询数据详解
lxjcxj的专栏
09-10 836
array( 'conditions' => array('Model.field' => $thisValue), //条件数组 'recursive' => 1, //整型 'fields' => array('Model.field1', 'DISTINCT Model.field2'), //字段名数组 'order' => array('Model.created', 'Mode
CakePHP中获取Request请求数据的几种方式
般若
10-24 2686
在不同的使用场景下，获取Cake\Http\ServerRequest请求数据的几种不同方式。
CakePHP中使用AJAX!
goingdownba的专栏
07-13 3662
昨天，David和Jack捣腾了半天，终于实现了CakePHP中使用AJAX删除用户记录，现将我们的经验总结后，与大家分享！      使用 AjaxHelper 之前, 你必须下载来自www.prototypejs.org 和 http://script.aculo.us 的最新版本的 JavaScript  库。并将解压后的src文件夹以及prototype.js文件，放置在
JTextField ���,����,����,����,��ϵ��ʽ; JRadioButton ��,Ů; ButtonGroup group=null; JButton ¼��,��ѯ,ɾ��,�޸�,��ʾ;
最新发布
08-08
### 回答1： JTextField 是一个文本框组件，可以用来输入和显示文本信息。它的构造方法可以设置文本框的初始文本内容、长度、对齐方式等属性。 JRadioButton 是一个单选按钮组件，可以让用户在几个选项中选择一个。它的构造方法可以设置按钮的初始状态、文本内容、图标等属性。 ButtonGroup 是一个单选按钮组的辅助类，用于维护一组单选按钮的状态。它的 add() 方法可以将单选按钮添加到组中，clearSelection() 方法可以清除组中的选中状态。 JButton 是一个按钮组件，可以用来触发某个操作或执行某个功能。它的构造方法可以设置按钮的文本内容、图标、是否可用等属性。 以上这些组件都是属于 Java Swing 界面库中的一部分，可以通过组合和布局的方式来构建出复杂的用户界面。 ### 回答2： JTextField 是一个可以让用户输入文本的组件。它可以用于创建文本框，让用户在其中输入文字信息。 JTextField 具有以下特点： - 可以设置文本框的大小和位置。 - 可以设置文本框的提示信息。 - 可以监听用户的输入事件。 - 可以限制用户的输入内容，例如只允许输入数字或者限制输入的字符数。 - 可以获取用户输入的文本内容。 JRadioButton 是一种单选按钮组件。它常用于在多个选项中选择一个选项。 JRadioButton 具有以下特点： - 可以创建多个单选按钮，并将它们放入同一个按钮组（ButtonGroup）中。 - 在同一个按钮组中，只能选中一个单选按钮。 - 可以通过监听单选按钮的选中事件，来获取用户当前选择的选项。 ButtonGroup group=null; 是定义了一个 ButtonGroup 类型的变量 group，并将其初始化为 null。 JButton 是一个按钮组件。它可以用来触发一些操作，例如保存、查询、删除、修改、显示等。 JButton 具有以下特点： - 可以创建一个具有特定文本或图标的按钮。 - 可以设置按钮的大小和位置。 - 可以监听按钮的点击事件。 - 可以通过设置按钮的样式、颜色等属性，来改变按钮的外观。 以上是对给定代码中 JTextField、JRadioButton、ButtonGroup 和 JButton 的功能和特点进行的简要说明。 ### 回答3： JTextField 是 Java Swing 组件库中的一个类，用于创建文本输入框。它可以用于接收用户的输入，并且可以通过代码来获取或修改输入框中的文本内容。JTextField 提供了一些属性和方法，可以设置输入框的大小、字体、边框等样式，还可以添加监听器来处理用户输入事件。 JRadioButton 也是 Java Swing 组件库中的一个类，用于创建单选按钮。它可以用于提供用户在多个选项中选择一个的功能。JRadioButton 有两种状态：选中和未选中，在同一个按钮组中只能有一个按钮被选中。可以通过代码来获取选中的按钮，并且可以设置按钮的文本、样式等属性。 ButtonGroup 是一个用于管理单选按钮的类。通过创建 ButtonGroup 对象并将一组 JRadioButton 对象添加到该组中，可以确保在这组单选按钮中只有一个按钮被选中。这样可以实现单选的功能。 JButton 是 Java Swing 组件库中的一个类，用于创建按钮。它可以被用户点击，用于触发响应的事件处理代码。JButton 通常用于执行特定的操作，比如保存数据、查询信息、删除内容等。可以通过代码来设置按钮的文本、图标、样式等属性，还可以为按钮添加监听器来处理按钮的点击事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值