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

最新推荐文章于 2021-10-12 19:21:22 发布
最新推荐文章于 2021-10-12 19:21:22 发布
阅读量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>

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

凭江仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CakePHP使用ajax传值
12-25
cakphp关于ajax传值的方法，以及中文乱码，路径不正确等
cakephp-ajax：用于CakePHP的AJAX：用于简化处理AJAX请求的插件
01-28
通过View类映射进行自动处理，并通过设计使控制器动作在AJAX和非AJAX中均可用。 Flash消息和重定向（预防）支持。 有关此视图类和插件代码的历史记录的详细信息，请参见。 安装和文档 可能的待办事项 也许围绕自动...
如何在CakePHP中使用Ajax请求
般若
04-01 2099
在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系列二 表单数据显示
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的例子
CakePHP中获取Request请求数据的几种方式
般若
10-24 2678
在不同的使用场景下，获取Cake\Http\ServerRequest请求数据的几种不同方式。
解决CakePHP 3.6+项目中Ajax请求403 Forbidden的问题
般若
10-12 296
最近升级在项目中使用的CakePHP框架，发现原来在CakePHP 3.5版本中都运行正常的Ajax请求，在3.6及以上版本中都会报`403 Forbidden`的错误。 最后发现在较新版本的CakePHP中，配置文件`config/routes.php` 中默认注册并启用了CSRF中间件`CsrfProtectionMiddleware`，注释掉该部分代码即可。
[转]AJAX in CakePHP
heiyeluren的blog（黑夜路人的开源世界）
02-22 2871
//本文是高手Nio的的文章，发表在在PHP&More第六期上，欢迎大家下载PHP&More Vol 6AJAX in CakePHPCake 中的 AJAX 实质CakePHP（以下简称“Cake”，本文使用的版本是 0.10.7.1856 RC3）对 AJAX 的支持是建立在 prototype 与 script.aculo.us 之上的，其自身并没有包含服务器端、客户端的 A
PHP利用ECharts实现折线图
热门推荐
一码十行的博客
01-19 2万+
先到http://echarts.baidu.com/download.html 选择相应版本下载ECharts 建立html文件，引入刚刚下载的代码 根据需求，通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成相应的图形。 下面是官方教程的一个简单的实例： html> head> meta charset="utf-8">
CakePHP：ajax方式
pyzheng的专栏
10-22 161
[color=blue][b]直接在ocntroller返回：[/b][/color] [code="php"]public function ajax(){ $dlist=array("11","22","33"); return new CakeResponse(array('body' => json_encode($dlist), 'status' =...
在CakePHP的Controller中使用三种方式关联Model
【昆山人在上海】
03-21 988
在CakePHP的Controller中使用三种方式关联Model
CakePHP MVC设计：快速构建Web应用与数据管理
在"使用CakePHP快速打造Web站点（二）"中，文章着重讲解了如何利用CakePHP框架实现MVC（Model-View-Controller）设计模式来构建Web应用。MVC是一种软件架构模式，将应用程序划分为三个核心组件： 1. **模型（Model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值