PHP+Echarts+Ajax+Mysql测试数据

PHP+Echarts+Ajax+Mysql测试数据

PHP+Echarts+Ajax+Mysql测试数据

PHP连接Mysql功能设计

环境部署

部署本地PHP环境,可选用Apache、phpstudy等工具快速部署网页环境。本次测试选用phpstudy(Apache2.4.39+Mysql5.7.26),环境部署成功后,浏览器输入localhost:80或者127.0.0.1测试一下是否成功。

PHP+Echarts+Ajax+Mysql测试数据

创建数据库

提示:使用phpstudy部署环境后自动下载安装了mysql,无需再次安装!!!

使用navicat premium工具管理数据库,导入测试数据形成表即可。

连接功能编写

<?php
  //PHP连接数据库 
  header("content-type:text/json;charset=utf-8");
  //链接数据库
  $con = mysqli_connect("localhost", "", ""); 
  if (!$con) 
  { 
    die('Could not connect database: ' ); 
  } 
​
  //选择数据库
  $db_selected = mysqli_select_db($con, ""); 
  if (!$db_selected) 
  { 
    die ("Can\'t use  " ); 
  } 
​
  //执行MySQL查询-设置UTF8格式
  // mysqli_query("SET NAMES utf8");  
  // mysqli_query()
  $sql = "select adress,count(*) as count from sheet1 group by adress having count>1;";
  $result = mysqli_query($con,$sql); 
​
  //定义变量json存储值
  $data="";
  $array= array();
  class emp{
    public $adress;
    public $count;
  }
  while ($row = mysqli_fetch_row($result))
  { 
    list($adress,$count) = $row;   
    
​
    $em = new emp();
    $em->adress = $adress;
    $em->count = $count;
    
    //数组赋值
    $array[] = $em;
​
  }
​
  $data = json_encode($array);
  echo $data;
​
?>

获取json数据如图:

PHP+Echarts+Ajax+Mysql测试数据

Ajax异步加载测试

var adresss = [],counts = [];
        //调用ajax来实现异步的加载数据
        function getusers() {
            $.ajax({
                type: "get",
                async: false,
                url: "./test.php",
                data: {},
                dataType: "json",
                success: function(result){
                    if(result){
                        for (var i = 0; i < result.length; i++) {
                            adresss.push(result[i].adress);
                            counts.push(result[i].count);
​
                            }
                    }
                },
                error: function(errmsg) {
                    alert("Ajax获取服务器数据出错了!"+ errmsg);
                }
            });
            return adresss,counts;
        }
     
        // 执行异步请求
        getusers();
​
​

放入index.html测试无报错即可,可在浏览器中按F12进入开发者模式进行console控制台查看信息。

最终测试案例

Ajax测试中,经过多次测试get、post,发现json数据不同,获取方式也应对应改变,本次测试为get,网上教程多为post。

完整index.html文件如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax Test</title>
<script src="./js/echarts.js"></script>
<script src="./js/jquery.min.js"></script>
</head>
<body>
    <h1>PHP Ajax ECahrts 测试</h1>
    <hr>
    <div id="container" style="width: 600px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
        // 初始化两个数组,盛装从数据库中获取到的数据
        var adresss = [],counts = [];
        //调用ajax来实现异步的加载数据
        function getusers() {
            $.ajax({
                type: "get",
                async: false,
                url: "./test.php",
                data: {},
                dataType: "json",
                success: function(result){
                    if(result){
                        for (var i = 0; i < result.length; i++) {
                            adresss.push(result[i].adress);
                            counts.push(result[i].count);
​
                            }
                    }
                },
                error: function(errmsg) {
                    alert("Ajax获取服务器数据出错了!"+ errmsg);
                }
            });
            return adresss,counts;
        }
     
        // 执行异步请求
        getusers();
        
        var option = {
                title: {
                    text: 'SALARY OF EMP'
                },
                tooltip: {
                    //show : true
                },
                legend: {
                    data:['数量'],
                },
                xAxis: [{
                    data : adresss
                }],
                yAxis: {
                    
                },
                series: [{
                    name : "数量",
                    type : "bar",
                    data : counts
                },
                ]
            };
     
           
            myChart.setOption(option);
    </script>
<marquee>确认可以到达这里啊</marquee>
</body>
</html>

效果如图:

PHP+Echarts+Ajax+Mysql测试数据

                       

点击阅读全文

上一篇 2023年 6月 12日 am10:52
下一篇 2023年 6月 12日 am11:07