0

我正在继续上一个问题，即onclick -> mysql query -> javascript; 同一页

这是我用于下拉名称的 onchange 函数。它在每个下拉列表更改时调用。这个想法是将每个跑步者的名字发送到 php 页面以运行 mysql 查询，然后返回 3 个要输入到 javascript 的数组。

function sendCharts() {
var awayTeam = document.getElementById('awayRunner').value;
var homeTeam = document.getElementById('homeRunner').value;        


if(window.XMLHttpRequest) {
    xmlhttp14 = new XMLHttpRequest();

}
else {
    xmlhttp14 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp14.onreadystatechange = function() {
    if(xmlhttp14.readyState == 4 && xmlhttp14.status == 200) {

   var parts = xmlhttp14.responseText.split(','); //THIS IS WHAT IS RETURNED FROM THE MYSQL QUERY. WHEN I ALERT IT, IT OUTPUTS IN THE FORM 14,15,18,16,17,12,13 

          ... code that generates the chart 
        series: [   {
                        name: document.getElementById('awayRunner').value,
                        data: [parts,','], //THIS IS WHERE AN ARRAY MUST BE ENTERED. THIS OUPUTS ONLY ONE NUMBER 
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name: document.getElementById('homeRunner').value,
                        data: parts, // TRIED THIS
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [], //THIS IS WHERE 3rd ARRAY MUST BE ENTERED
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
    });

    }
}
xmlhttp14.open("GET", "getCharts.php?awayRunner="+awayRunner+"&homeRunner="+homeRunner, true);
xmlhttp14.send();

}

我的 php 代码看起来像这样。如您所见，必须返回 3 个数组才能输入到 javascript 中的不同位置以生成代码。

$away=$_GET['awayRunner'];
$home=$_GET['homeRunner'];

$db=mydb;



$homeRunner=array();
$awayRunner = array();
$totalOverall= array();

$getHome="select column from $db where tmName = '$home'";
$result2 = mysql_query($getHome);
while($row = mysql_fetch_array($result2)){
$homeRunner[]= $row['column'];
}

$getAway="select column from $db where tmName ='$away'";
$result22 = mysql_query($getAway);
while($row2 = mysql_fetch_array($result22)){
$awayRunner[]= $row2['column'];

}

$week = 0;
while($week<20){
$week++;
$teamCount = "select count(column) from $db where week = $week";
$resultTeam =  mysql_query($teamCount);
$rowTeam = mysql_fetch_array($resultTeam);
$t = $rowTeam['count(column)'];

$getLeague = "select sum(column) from $db where week = $week";
$resultLeague = mysql_query($getLeague);
while($row3 = mysql_fetch_array($resultLeague)){
    $totalOverall[]=$row3['sum(column)']/$t;
    }
}
echo join(',',$awayRunner);

目前，通过这种方式，图表仅输出数组中的第二个值。例如，如果 var 部分等于 23,25,26,24,23...仅显示 25。

上一个问题得到以下答案 -

  1. 加载页面。
  2. 用户选择一个选项。
  3. onChange 侦听器触发 AJAX 请求
  4. 服务器接收并处理请求
  5. 服务器为相关选择发回一个 JSON 数组选项
  6. 客户端 AJAX 发送方得到响应
  7. 客户端更新选择以获取 JSON 数组中的值。

我在#'s 5 - 7 上迷路了。有人可以提供完成此操作的代码示例吗？通常，我只会询问方向，但我已经被这个问题困扰了好几天。我准备放弃在我的网站上放置图表的想法。提前致谢

EDIT

这是我为发送和接收一个请求所做的第一个更改

<script>
$(function(){
    $("#awayRunner").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "data=" + $("#awayRunner").val(),
        dataType: "json",
        url: "/my.php",
        success: function(response){
            alert(response);  
        }
        });
    });
});

提示框中显示的数据格式为 12、15、16、15。现在，当我输入 data: response 时，图表中只显示了每个数字中的第二个数字。有任何想法吗？

EDIT

好的，所以我发现响应的信息是一个字符串。必须使用 parseInt 将其转换为 INT 才能在图表中使用。目前，我有

$("#awayTeam").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "away=" + $("#awayTeam").val(),
        dataType: "json",
        url: "/getCharts.php",
        success: function(response){
              var asdf = [];
              asdf[0] = parseInt(response[0]);
              asdf[1] = parseInt(response[1]);
              asdf[2] = parseInt(response[2]);
              asdf[3] = parseInt(response[3]); 
              alert(asdf);

将不得不编写一个函数来使这个更干净。

4

1 回答 1

0

我不敢相信，但我终于明白了。这是我如何使用 onchange 方法来刺激 MYSQL 查询并让 Highchart 显示结果。主要问题是返回的 JSON 数组是一个需要转换为 INT 的字符串。然后在数据中使用 resultArray 变量：highChart 的部分。

$(function(){
    $("#awayTeam").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "away=" + $("#awayRunner").val(),
        dataType: "json",
        url: "/getCharts.php",
        success: function(response){
              var arrayLength = response.length;
              var resultArray = [];
              var i = 0;
              while(i<arrayLength){
                  resultArray[i] = parseInt(response[i]);
                  i++;
              }

在 PHP 代码中，数组必须像这样返回为 JSON

echo json_encode($awayRunner);
于 2012-09-25T04:31:08.917 回答