PHP+Echarts+Ajax+Mysql测试数据

Darkeston

于 2022-04-11 11:12:09 发布

阅读量1k

点赞数

分类专栏：测试小计文章标签： echarts php ajax mysql

本文链接：https://blog.csdn.net/Lingo12/article/details/124094216

版权

测试小计专栏收录该内容

2 篇文章 0 订阅

订阅专栏

PHP+Echarts+Ajax+Mysql测试数据

PHP连接Mysql功能设计

环境部署

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

创建数据库

提示：使用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数据如图：

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>

效果如图：