大神,谢谢您回答我的问题,我通过表单把数据传过去了,也成功了执行了数据库查询,但是echarts利用ajax请求数据的时候总是不成功,之前我没有利用表单传值的时候是可以请求成功的,麻烦你帮我看看我的代码,非常感谢。

liuyue111 发布于 2017/11/11 20:04
阅读 79
收藏 0

@天线彪彪 你好,想跟你请教个问题:

tj4-2.php

<html>
<head>
<title>第四个统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script src="echarts.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<table border="1" align="center" width="500">
<form action="tj4-3.php" method="post" target="nm_iframe">
<caption><h1>第四个统计</h1></caption>
<tr>
<td>
客户号:<input type="text" size="15" name="ACCT" id="text1" />
</td>
<td>
产品号:<input type="text" size="15" name="SKU" id="text2" />
</td>
<td>
<input type="submit" size="4" name="select" value="查询"/>
</td>
</tr>
<iframe id="id_iframe" name="nm_iframe" style="display:true;"></iframe>
</form>
</table>
     <div id="main" style="height:400px"></div>
     <script type="text/javascript">
              var myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
    
               function arrTest(){
                $.ajax({
                  type:"get",
                  async:false,
                  url:"tj4-3.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      console.log(result);
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].zkl);
                          arr2.push(result[i].cjl);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['zkl']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"zkl",
                            "type":"bar",
                            "data":arr2
                        }
                    ]
                };
                
                myChart.setOption(option);
                    
    </script>
 
    </body>
    </html>
 tj4-3.php

 <?php
$servername = "localhost";
$username = "root";
$password = "";
$mysqlname = "shuju";
$json = '';
$data = array();
class User
{
public $zkl;
public $cjl;
}

 
$conn = mysqli_connect($servername, $username, $password, $mysqlname);
 
$sql = "select RFQ_Price,List_Price, RFQ_Qty ,Order_Qty,(RFQ_Price/List_Price)*100 as'zkl', (Order_Qty/RFQ_Qty)*100 as'cjl' from data where ACCT={$_POST["ACCT"]} and SKU= {$_POST["SKU"]} order by (RFQ_Price/List_Price)*100 ";

$result = $conn->query($sql);

 

if($result){
 
while ($row = mysqli_fetch_array($result,MYSQL_ASSOC))
{
$user = new User();
$user->zkl = $row["zkl"];
$user->cjl = $row["cjl"];
 
$data[]=$user;
}
$json = json_encode($data);//把数据转换为JSON数据.
echo($json);
 }else{
echo "查询失败";
}
?>

这是我的执行,我设置iframe,实现页面的只提交数据,不跳转页面。

麻烦您了。

加载中
0
kakai
kakai
$.ajax({
   type: "POST",
   dataType: "html/text",
   url: "tj4-3.php",
   data: $('#表单id').serialize(),
   success: function (result) {
      alert(result);
   },
   error: function(data) {
      alert("error:"+data.responseText);
   }
});

对照一下这个,你的data格式是{}这样的,是一个空的object对象。还有,你这个arrTest()函数最好是通过点击“查询”提交按钮的时候调用,不要直接定义完就直接调用,因为你的表单还没有输入数据,除非,你在html页面定义input标签的时候把文本内容写死了。

ajax是异步事件驱动的,你在arrTest函数中调用ajax后直接return arr1和arr2,此时有可能ajax的数据还没有返回,arr1和arr2仍旧是空的。建议success函数中直接处理返回的数据,去除return。

返回顶部
顶部