如何使用按钮onclick从表单序列化数据显示高清数据?

时间:2017-07-30 14:58:20

标签: php highcharts

我这里有问题。我试图在高图实例中显示我的数据。对数据的查询包含 WHERE 子句。因为 where 子句我需要序列化需要进入我的PHP的数据,然后调用函数将数据显示到高图。我尝试了许多代码,但我的代码都没有为它工作。

我使用此代码来调用数据。 有关获取值的表单的信息,我正在使用#form_input10

$(function () {
			var chart;
			$(document).on('click','#display',function(e) {
				var json = $("#form_input10").serialize();
				$.getJSON("../php/termocouple/line_termocouple.php", function(json) {
				
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart1',
							type: 'line'
							
						},
						exporting: { 
						enabled: false 
						},
						title: {
							text: 'Termocouple Graph Result'
							
						},
						subtitle: {
							text: ''
						
						},
						xAxis: {
							title: {
								text: 'Sensor'
							},
							categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
						},
						yAxis: {
							title: {
								text: 'Temperature (°C)'
							},
							plotLines: [{
								value: 0,
								width: 1,
								color: '#808080'
							}]
						},
						tooltip: {
							formatter: function() {
									return '<b>'+ this.series.name +'</b><br/>'+
									this.x +': '+ this.y;
							}
						},
						legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'top',
							x: -10,
							y: 120,
							borderWidth: 0
						},
						exporting: { 
						enabled: false 
						},
						series: json
					});
				});
			
			});
	
		});	
<?php
include("../../Connections/koneksi.php");
$tgl1=$_POST['tanggal1'];
$tgl2=$_POST['tanggal2'];

// Data for Titik1
$sql = "SELECT * FROM termocouple where no ='1' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows = array();
$rows['name'] = 'Titik 1';
while($tmp= mysqli_fetch_array($query)) {
    $rows['data'][] = $tmp['sensor1'];
	$rows['data'][] = $tmp['sensor2'];
	$rows['data'][] = $tmp['sensor3'];
	$rows['data'][] = $tmp['sensor4'];
	$rows['data'][] = $tmp['sensor5'];
	$rows['data'][] = $tmp['sensor6'];
	$rows['data'][] = $tmp['sensor7'];
	$rows['data'][] = $tmp['sensor8'];
	$rows['data'][] = $tmp['sensor9'];
	$rows['data'][] = $tmp['sensor10'];
	$rows['data'][] = $tmp['sensor11'];
	$rows['data'][] = $tmp['sensor12'];
}

// Data for Titik2
$sql = "SELECT * FROM termocouple where no ='2' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows1 = array();
$rows1['name'] = 'Titik 2';
while($tmp = mysqli_fetch_array($query)) {
    $rows1['data'][] = $tmp['sensor1'];
	$rows1['data'][] = $tmp['sensor2'];
	$rows1['data'][] = $tmp['sensor3'];
	$rows1['data'][] = $tmp['sensor4'];
	$rows1['data'][] = $tmp['sensor5'];
	$rows1['data'][] = $tmp['sensor6'];
	$rows1['data'][] = $tmp['sensor7'];
	$rows1['data'][] = $tmp['sensor8'];
	$rows1['data'][] = $tmp['sensor9'];
	$rows1['data'][] = $tmp['sensor10'];
	$rows1['data'][] = $tmp['sensor11'];
	$rows1['data'][] = $tmp['sensor12'];
}

// Data for Titik3
$sql = "SELECT * FROM termocouple where no ='3' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows2 = array();
$rows2['name'] = 'Titik 3';
while($tmp = mysqli_fetch_array($query)) {
    $rows2['data'][] = $tmp['sensor1'];
	$rows2['data'][] = $tmp['sensor2'];
	$rows2['data'][] = $tmp['sensor3'];
	$rows2['data'][] = $tmp['sensor4'];
	$rows2['data'][] = $tmp['sensor5'];
	$rows2['data'][] = $tmp['sensor6'];
	$rows2['data'][] = $tmp['sensor7'];
	$rows2['data'][] = $tmp['sensor8'];
	$rows2['data'][] = $tmp['sensor9'];
	$rows2['data'][] = $tmp['sensor10'];
	$rows2['data'][] = $tmp['sensor11'];
	$rows2['data'][] = $tmp['sensor12'];
}
// Data for Titik4
$sql = "SELECT * FROM termocouple where no ='4' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows3 = array();
$rows3['name'] = 'Titik 4';
while($tmp = mysqli_fetch_array($query)) {
    $rows3['data'][] = $tmp['sensor1'];
	$rows3['data'][] = $tmp['sensor2'];
	$rows3['data'][] = $tmp['sensor3'];
	$rows3['data'][] = $tmp['sensor4'];
	$rows3['data'][] = $tmp['sensor5'];
	$rows3['data'][] = $tmp['sensor6'];
	$rows3['data'][] = $tmp['sensor7'];
	$rows3['data'][] = $tmp['sensor8'];
	$rows3['data'][] = $tmp['sensor9'];
	$rows3['data'][] = $tmp['sensor10'];
	$rows3['data'][] = $tmp['sensor11'];
	$rows3['data'][] = $tmp['sensor12'];
}
// Data for Titik 5
$sql = "SELECT * FROM termocouple where no ='5' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows4 = array();
$rows4['name'] = 'Titik 5';
while($tmp = mysqli_fetch_array($query)) {
    $rows4['data'][] = $tmp['sensor1'];
	$rows4['data'][] = $tmp['sensor2'];
	$rows4['data'][] = $tmp['sensor3'];
	$rows4['data'][] = $tmp['sensor4'];
	$rows4['data'][] = $tmp['sensor5'];
	$rows4['data'][] = $tmp['sensor6'];
	$rows4['data'][] = $tmp['sensor7'];
	$rows4['data'][] = $tmp['sensor8'];
	$rows4['data'][] = $tmp['sensor9'];
	$rows4['data'][] = $tmp['sensor10'];
	$rows4['data'][] = $tmp['sensor11'];
	$rows4['data'][] = $tmp['sensor12'];
}
// Data for Titik 6
$sql = "SELECT * FROM termocouple where no ='6' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows5 = array();
$rows5['name'] = 'Titik 6';
while($tmp = mysqli_fetch_array($query)) {
    $rows5['data'][] = $tmp['sensor1'];
	$rows5['data'][] = $tmp['sensor2'];
	$rows5['data'][] = $tmp['sensor3'];
	$rows5['data'][] = $tmp['sensor4'];
	$rows5['data'][] = $tmp['sensor5'];
	$rows5['data'][] = $tmp['sensor6'];
	$rows5['data'][] = $tmp['sensor7'];
	$rows5['data'][] = $tmp['sensor8'];
	$rows5['data'][] = $tmp['sensor9'];
	$rows5['data'][] = $tmp['sensor10'];
	$rows5['data'][] = $tmp['sensor11'];
	$rows5['data'][] = $tmp['sensor12'];
}
// Data for Titik 7
$sql = "SELECT * FROM termocouple where no ='7' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows6 = array();
$rows6['name'] = 'Titik 7';
while($tmp = mysqli_fetch_array($query)) {
    $rows6['data'][] = $tmp['sensor1'];
	$rows6['data'][] = $tmp['sensor2'];
	$rows6['data'][] = $tmp['sensor3'];
	$rows6['data'][] = $tmp['sensor4'];
	$rows6['data'][] = $tmp['sensor5'];
	$rows6['data'][] = $tmp['sensor6'];
	$rows6['data'][] = $tmp['sensor7'];
	$rows6['data'][] = $tmp['sensor8'];
	$rows6['data'][] = $tmp['sensor9'];
	$rows6['data'][] = $tmp['sensor10'];
	$rows6['data'][] = $tmp['sensor11'];
	$rows6['data'][] = $tmp['sensor12'];
}
// Data for Titik 8
$sql = "SELECT * FROM termocouple where no ='8' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows7 = array();
$rows7['name'] = 'Titik 8';
while($tmp = mysqli_fetch_array($query)) {
    $rows7['data'][] = $tmp['sensor1'];
	$rows7['data'][] = $tmp['sensor2'];
	$rows7['data'][] = $tmp['sensor3'];
	$rows7['data'][] = $tmp['sensor4'];
	$rows7['data'][] = $tmp['sensor5'];
	$rows7['data'][] = $tmp['sensor6'];
	$rows7['data'][] = $tmp['sensor7'];
	$rows7['data'][] = $tmp['sensor8'];
	$rows7['data'][] = $tmp['sensor9'];
	$rows7['data'][] = $tmp['sensor10'];
	$rows7['data'][] = $tmp['sensor11'];
	$rows7['data'][] = $tmp['sensor12'];
}
// Data for Titik 9
$sql = "SELECT * FROM termocouple where no ='9' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows8 = array();
$rows8['name'] = 'Titik 9';
while($tmp = mysqli_fetch_array($query)) {
    $rows8['data'][] = $tmp['sensor1'];
	$rows8['data'][] = $tmp['sensor2'];
	$rows8['data'][] = $tmp['sensor3'];
	$rows8['data'][] = $tmp['sensor4'];
	$rows8['data'][] = $tmp['sensor5'];
	$rows8['data'][] = $tmp['sensor6'];
	$rows8['data'][] = $tmp['sensor7'];
	$rows8['data'][] = $tmp['sensor8'];
	$rows8['data'][] = $tmp['sensor9'];
	$rows8['data'][] = $tmp['sensor10'];
	$rows8['data'][] = $tmp['sensor11'];
	$rows8['data'][] = $tmp['sensor12'];
}
// Data for Titik 10
$sql = "SELECT * FROM termocouple where no ='10' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows9 = array();
$rows9['name'] = 'Titik 10';
while($tmp = mysqli_fetch_array($query)) {
    $rows9['data'][] = $tmp['sensor1'];
	$rows9['data'][] = $tmp['sensor2'];
	$rows9['data'][] = $tmp['sensor3'];
	$rows9['data'][] = $tmp['sensor4'];
	$rows9['data'][] = $tmp['sensor5'];
	$rows9['data'][] = $tmp['sensor6'];
	$rows9['data'][] = $tmp['sensor7'];
	$rows9['data'][] = $tmp['sensor8'];
	$rows9['data'][] = $tmp['sensor9'];
	$rows9['data'][] = $tmp['sensor10'];
	$rows9['data'][] = $tmp['sensor11'];
	$rows9['data'][] = $tmp['sensor12'];
}// Data for Titik 11
$sql = "SELECT * FROM termocouple where no ='11' and tanggal='$tgl1' and tanggal2='$tgl2'";
$query = mysqli_query($db,$sql);
$rows10 = array();
$rows10['name'] = 'Titik 11';
while($tmp = mysqli_fetch_array($query)) {
    $rows10['data'][] = $tmp['sensor1'];
	$rows10['data'][] = $tmp['sensor2'];
	$rows10['data'][] = $tmp['sensor3'];
	$rows10['data'][] = $tmp['sensor4'];
	$rows10['data'][] = $tmp['sensor5'];
	$rows10['data'][] = $tmp['sensor6'];
	$rows10['data'][] = $tmp['sensor7'];
	$rows10['data'][] = $tmp['sensor8'];
	$rows10['data'][] = $tmp['sensor9'];
	$rows10['data'][] = $tmp['sensor10'];
	$rows10['data'][] = $tmp['sensor11'];
	$rows10['data'][] = $tmp['sensor12'];
}


$result = array();
array_push($result,$rows);
array_push($result,$rows1);
array_push($result,$rows2);
array_push($result,$rows3);
array_push($result,$rows4);
array_push($result,$rows5);
array_push($result,$rows6);
array_push($result,$rows7);
array_push($result,$rows8);
array_push($result,$rows9);
array_push($result,$rows10);


print json_encode($result, JSON_NUMERIC_CHECK);

mysqli_close($db);
?> 

我也尝试使用此代码,但我的数据仍未显示

$(function () {
			
			$(document).on('click','#display',function(e) {
				var data = $("#form_input10").serialize();
	  
       			$.ajax({
			    data: data,
                type: "Get",
				dataType: 'JSON',
                url: "../php/termocouple/line_termocouple1.php",
                success: function(data){					
  				var list = JSON.parse(data);
				chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart1',
							type: 'line'
							
						},
						title: {
							text: 'Termocouple Graph Result'
							
						},
						subtitle: {
							text: ''
						
						},
						xAxis: {
							title: {
								text: 'Sensor'
							},
							categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
						},
						yAxis: {
							title: {
								text: 'Temperature (°C)'
							},
							plotLines: [{
								value: 0,
								width: 1,
								color: '#808080'
							}]
						},
						tooltip: {
							formatter: function() {
									return '<b>'+ this.series.name +'</b><br/>'+
									this.x +': '+ this.y;
							}
						},
						legend: {
							layout: 'vertical',
							align: 'right',
							verticalAlign: 'top',
							x: -10,
							y: 120,
							borderWidth: 0
						},
						
						exporting: { 
						enabled: false 
						},
						series: data
				
					});}
						});	
							});
								});	

1 个答案:

答案 0 :(得分:0)

$.getJSON()执行 GET 请求。要获取 POST 数据,请使用$.post()

$.post("../php/termocouple/line_termocouple.php", json, function(json) {

同样,第二个代码段正在发送 GET 请求。要让它发送 POST 请求,请更改类型

$.ajax({
    data: data,
    type: "POST",

演示

我上周碰巧看了your other similar question,并准备展示它的运作情况。我为它保留了我的试验性PHP代码,并且可以显示上述变化的示例。看看this PHPFiddle。请注意:

  • 将PHP代码简化为对array_map()的2次调用,以生成数字。我无权访问您的数据库,因此无法运行查询。
  • AJAX请求的URL已更新为`因为PHPFiddle只允许一个PHP文件
  • 我在调用json_encode()之前添加了行header('Content-Type: application/json');,以确保jQuery代码将响应解释为JSON。

单击标有运行 - F9 的按钮以查看该页面,然后单击标有“显示数据”的按钮以触发表单序列化和AJAX请求。

下面是我在Firefox中打开网络选项卡并观察带有参数的POST请求(即 POST 数据)的屏幕截图。

network tab in FF