需求:刷新頁面後,把數據庫內數據反映到模板上。
環境爲:phpStudy 2016 php-5.4.45
數據庫環境:http://localhost:81/phpMyAdmin/index.php
連接環境:E:\phpStudy\WWW\subject\index-instance.html
所有內存都放在subject文件夾內。
連接:http://localhost:81/subject/index-instance.html或dist/js/pages/index3.php
簡化版前臺頁面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dashboard</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<!-- Main row -->
<div class="row">
<!-- Left col -->
<section class="col-lg-7 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
<li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
</body>
</html>
簡化版dashboard.js
/* Morris.js Charts */
// json -> ynum\itemxnum\itemynum
var jsonobj;
var testgg;
$.post({
type :"post",
// dataType: data,
url :"/AdminLTE-2.4.5-instance/dist/js/pages/index3.php",
async :false,
success :function(data,status){
//var jsonStr1 = JSON.stringify(jsonObj);
//var jsonObj = JSON.parse(jsonStr)
jsonobj= $.parseJSON(data);
alert("data" + data);
testgg= data;
}
});
alert("testgg:" + typeof(testgg));
alert("jsonobj" + jsonobj);
var ynum = [];
var itemxnum= [];
var itemynum= [];
$.each(jsonobj,function (i,item) {
alert("item.y:" + item.y);
ynum.push(item.y);
alert(ynum);
alert("item.item1:" + item.item1);
itemxnum.push(item.item1);
alert(itemxnum);
alert("item.item2:" + item.item2);
itemynum.push(item.item2);
alert(itemynum);
});
// Sales chart
// var ynum=['2011 Q1','2011 Q2'];
// eval('var params = ' + myParamInfo);
var jsonArr = [];
for(var i =0 ;i < jsonobj.length;i++){
jsonArr[i] = jsonobj[i];
}
console.log(typeof(jsonArr))
var formdata = jsonArr;
// var formdata = [{ y: ynum[0], item1: itemxnum[0], item2: itemynum[0] }];
var area = new Morris.Area({
element : 'revenue-chart',
resize : true,
/*
data : [{ y: ynum[0], item1: itemxnum[0], item2: itemynum[0] }],
*/
data : formdata,
xkey : "y",
ykeys : ["item1", "item2"],
labels : ['Item 1', 'Item 2'],
lineColors: ['#a0d0e0', '#3c8dbc'],
hideHover : 'auto'
});
/*
var request=$.ajax({url:'/AdminLTE-2.4.5-instance/dist/js/pages/index5.php',async:false});
var jsonStr=request.responseText;
var jsonObj=JSON.parse(jsonStr);
var info=jsonObj.info;
var items=jsonObj.items;
alert(info);
alert(items);
var xhr = new XMLHttpRequest;
xhr.open('post', '/AdminLTE-2.4.5-instance/dist/js/pages/index4.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status ==304)) {
var rst = JSON.parse(xhr.responseText);
alert(rst.name);
}
};
*/
/*
var target=[];
var targetl=[];
for (var key in strString) {
target.push(key);
targetl.push(strString[key]);
}
console.log(target);
console.log(targetl);
$(document).ready(function(){
$.post("/AdminLTE-2.4.5-instance/dist/js/pages/index3.php",
function(data,status){
alert("數據:" + data + "\n狀態:" + status);
});
});
*/
var line = new Morris.Line({
element : 'line-chart',
resize : true,
data : [
{ y: ynum[0], item1: itemxnum[0] },
{ y: ynum[1], item1: itemxnum[1] }
],
xkey : 'y',
ykeys : ['item1'],
labels : ['Item 1'],
lineColors : ['#efefef'],
lineWidth : 2,
hideHover : 'auto',
gridTextColor : '#fff',
gridStrokeWidth : 0.4,
pointSize : 4,
pointStrokeColors: ['#efefef'],
gridLineColor : '#efefef',
gridTextFamily : 'Open Sans',
gridTextSize : 10
});
通過定位id=revenue-chart。定位出相關代碼:element : 'revenue-chart'
建立chartsdata測試數據庫:
建立id結構tinyint(1)。建立y結構varchar(255)。建立item1結構varchar(255)。建立item2結構varchar(255)。
手動輸入數據y:2017 Q4 item1:4000 item2:5000
注意必須爲年+空格+季度,數據必須item1<item2。
建立index3.php傳送數據庫數據:
<?php
$servername = "localhost";
$username = "root";
$password = "root1";
$mysqlname = "data1";
$json = '';
$data = array();
class User {
public $y;
public $item1;
public $item2;
}
$conn = mysqli_connect($servername, $username, $password, $mysqlname);
$sql = "SELECT * FROM chartsdata";
$result = $conn->query($sql);
if($result){
while ($row = mysqli_fetch_array($result,MYSQL_ASSOC)){
$user = new User();
$user->y = $row["y"];
$user->item1 = $row["item1"];
$user->item2 = $row["item2"];
$data[]=$user;
}
$json = json_encode($data);
// echo "{".'"user"'.":".$json."}";
echo $json;
}else{
echo "查詢失敗";
}
?>
實現:提取y、item1、item2的對象,並裝到data對象內,然後通過$json = json_encode($data);來轉換爲json數據,再通過echo打印爲json字符串展示在頁面。放入路徑dist/js/pages/index3.php。
展示:[{"y":"2017 Q4","item1":"4000","item2":"5000"},{"y":"2017 Q1","item1":"2000","item2":"2000"},{"y":"2017 Q2","item1":"2200","item2":"2500"}]
dao.php之前項目已經闡述:
<?php
$dao =mysql_connect("localhost", "root", "root1");
if (!$dao)
{
die('MySQL connect failed at first ' . mysql_error());
}
$db_selected =mysql_select_db("data1", $dao);
mysql_query("set names 'utf8'");
?>
實現:連接
下面是實驗幾種連接數據庫方式並返回數據,後查資料發現還是json效果最好,所以使用上面的index3.php爲最終版
參考資料:百度json,JQuery.Ajax()的data參數類型,連接:http://www.cnblogs.com/haitao-fan/p/3908973.html
json字符串、json對象、數組 三者之間的轉換,連接:https://www.cnblogs.com/cainiao-Shun666/p/6557401.html
ajax獲取json數據爲多維數組時,前臺js嵌套循環解析,連接:https://blog.csdn.net/bai_riqiang/article/details/78722257
<?php include ("dao.php");?>
<?php
$sql="select * from chartsdata ORDER BY id DESC" ;
$query=mysql_query($sql);
while ($row=mysql_fetch_array($query)){
?>
y: <?php echo $row['y'];?>
item1: <?php echo $row['item1'];?>
item2: <?php echo $row['item2'];?>
<?php }?>
展示:y: 2017 Q4item1: 4000item2: 5000 y: 2017 Q2item1: 2200item2: 2500 y: 2017 Q1item1: 2000item2: 2000
分解dashboard.js
首先建立ajax傳輸:
var jsonobj;
var testgg;
$.post({
type :"post",
// dataType: data,
url :"/AdminLTE-2.4.5-instance/dist/js/pages/index3.php",
async :false,
success :function(data,status){
//var jsonStr1 = JSON.stringify(jsonObj);
//var jsonObj = JSON.parse(jsonStr)
jsonobj= $.parseJSON(data);
alert("data" + data);
testgg= data;
}
});
alert("testgg:" + typeof(testgg));
alert("jsonobj" + jsonobj);
定義了jsonobj爲json的對象,testgg爲json的字符串,直接用jQuery的post提交返回方法,url爲項目/加目錄/.php,使用同步傳輸而不是異步async :false,所以不會繼續執行ajax後面的腳本,直到服務器端返回數據後,會直接在沒有返回值之前,同步請求將鎖住瀏覽器,用戶等待請求完成纔可以執行。
因爲ajax請求dataType值爲json,jquery就會把後端返回的字符串嘗試通過JSON.parse()嘗試解析爲js對象。
我又把dataType值改爲'text',結果彈出框直接顯示後臺返回的json字符串。
我又把dataType值改爲'html',結果彈出框直接顯示後臺返回的json字符串。
success :function(data,status){}:data爲數據可以var jsonStr1 = JSON.stringify(jsonObj);或var jsonObj = JSON.parse(jsonStr)或jsonobj= $.parseJSON(data);來處理數據爲需要的json不同格式。並alert("data" + data);。另外console.log("testgg:" + typeof(testgg));可以查看數據類型並輸出到控制檯。
顯示data:[{"y":"2017 Q4","item1":"4000","item2":"5000"},{"y":"2017 Q1","item1":"2000","item2":"2000"},{"y":"2017 Q2","item1":"2200","item2":"2500"}]
顯示data的也就是testgg的數據類型:string
把data處理jsonobj= $.parseJSON(data);jsonobj顯示:[object Object],[object Object],[object Object]
var ynum = [];
var itemxnum= [];
var itemynum= [];
$.each(jsonobj,function (i,item) {
alert("item.y:" + item.y);
ynum.push(item.y);
alert(ynum);
alert("item.item1:" + item.item1);
itemxnum.push(item.item1);
alert(itemxnum);
alert("item.item2:" + item.item2);
itemynum.push(item.item2);
alert(itemynum);
});
定義數組,並把json的對象拿出,使用$.each(jsonobj,function(i,item){y.push(item.y)})把字符串顯示的對象放到數組內。
顯示item.y:2017 Q4。push後顯示ynum數組:2017 Q4。之後循環push。
轉化爲json對象然後賦值到函數的參數內
var jsonArr = [];
for(var i =0 ;i < jsonobj.length;i++){
jsonArr[i] = jsonobj[i];
}
console.log(typeof(jsonArr))
var formdata = jsonArr;
// var formdata = [{ y: ynum[0], item1: itemxnum[0], item2: itemynum[0] }];
把jsonobj對象放到jsonArr數組內
顯示jsonArr:object。對比一下:jsonobj顯示:[object Object],[object Object],[object Object]
最後把: data : [{ y: ynum[0], item1: itemxnum[0], item2: itemynum[0] }],替換爲 data : formdata,
既可以把json的對象轉成數組對象,然後再放到參數內。