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

最新推荐文章于 2019-06-19 20:30:33 发布
最新推荐文章于 2019-06-19 20:30:33 发布
阅读量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：用于CakePHP的AJAX：用于简化处理AJAX请求的插件
01-28
通过View类映射进行自动处理，并通过设计使控制器动作在AJAX和非AJAX中均可用。 Flash消息和重定向（预防）支持。 有关此视图类和插件代码的历史记录的详细信息，请参见。 安装和文档 可能的待办事项 也许围绕自动...
如何在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系列二 表单数据显示
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中获取Request请求数据的几种方式
般若
10-24 2685
在不同的使用场景下，获取Cake\Http\ServerRequest请求数据的几种不同方式。
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获取参数的几种方式，获取json格式的数据
阳水平的博客
06-19 751
获取json类型的参数： $data=$this->request->input('json_decode'); echo "<pre>"; print_r($data); echo "</pre>"; exit;
cakephp菜鸟笔记——Js引擎jQuery使用
后视镜
03-05 1954
cakephp的ajax默认绑定prototype，而本人接触js一开始就是jQuery控，闲话不多说，直接讲讲我用Js的helpers的引擎是jQuery库的过程。 echo $this->Html->script('jquery'); 这句话就是开启了jQuery库的支持。并且需要app_controller.php里面添加Js helpers的支持。 echo $this
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值