需求：刷新页面后，把数据库内数据反映到模板上。
环境为：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的对象转成数组对象，然后再放到参数内。
扫一扫
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
