PHP+MySQL开发小项目的集合笔记（一）ajax读取数据并反映到折线模板内

其他 2018-10-22 14:44:09 阅读次数: 0

需求：刷新页面后，把数据库内数据反映到模板上。

环境为：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的对象转成数组对象，然后再放到参数内。
        

猜你喜欢

转载自blog.csdn.net/qq_33568065/article/details/82146357
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022