onchange F（x）到php到Highchart在同一页上 [英] onchange F(x) to php to Highchart on same page

查看：81
本文介绍了onchange F（x）到php到Highchart在同一页上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在继续询问 onclick - > mysql查询 - > 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（'，'）; //这是什么从MYSQL查询返回。当我发出警报时，它输出格式为14,15,18,16,17,12,13 
 
 ...生成图表
系列的代码：[{
名称：document.getElementById（'awayRunner'）。value，
 data：[parts，'，']，//这里是一个数组必须被输入的地方。这个插件只有一个数字
 type：'column'，
 pointStart：0 
 // pointInterval 
}，
 
 {
 
 name：document.getElementById（'homeRunner'）。value，
 data：parts，// TRIED THIS 
 type：'column'，
 pointStart：0 
 // pointInterval 
}，
 
 {
名称：'League Avg'，
 data：[]，//这里是第三阵列必须输入
键入：'spline'，
 pointStart：0 
 // pointInterval 
}，
] 
}）; 
 
 
 $ b xmlhttp14.open（GET，getCharts.php？awayRunner =+ awayRunner +& homeRunner =+ homeRunner，true）; 
 xmlhttp14.send（）;

}



我的php代码看起来像这样。正如你将看到的，有三个数组必须被返回以输入到javascript中的不同位置以生成代码。 

  $ away = $ _ GET ['awayRunner']; 
 $ home = $ _ GET ['homeRunner']; 
 
 $ db = mydb; 
 
 
 
 $ homeRunner = array（）; 
 $ awayRunner = array（）; 
 $ totalOverall = array（）; 
 
 $ getHome =从$ db中选择列，其中tmName ='$ home'; 
 $ result2 = mysql_query（$ getHome）; 
 while（$ row = mysql_fetch_array（$ result2））{
 $ homeRunner [] = $ row ['column']; 
} 
 
 $ getAway =从$ 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 =从$ db中选择总和（列）where 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数组，用于依赖select

  6. 客户端AJAX发件人获取响应
    7. >
  7. 客户端更新select以获取JSON数组中的值。

我迷失了＃的5 - 7.有人可以提供代码完成这个的例子吗？通常情况下，我只是要求提供方向，但我一直在这个问题上坚持了几天。我准备放弃在我的网站上放置图表的想法。提前致谢 

 编辑

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

 < 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时，
中只有第二个数字显示在图表中。任何想法？

 编辑

好的，所以我想出了答案中的信息是一个字符串。必须使用parseInt将其转换为INT才能在图表中使用。目前，我有 

  $（＃awayTeam）。change（function（）{
 $ .ajax（ {
 type：POST，
 data：away =+ $（＃awayTeam）。val（），
 dataType：json，
 url： / getCharts.php，
成功：函数（响应）{
 var asdf = []; 
 asdf [0] = parseInt（response [0]）; 
 asdf [1] = parseInt（response [1]）; 
 asdf [2] = parseInt（response [2]）; 
 asdf [3] = parseInt（response [3]）; 
 alert（asdf）;

必须编写一个函数来使这个更清洁。

解决方案

我无法相信它，但我终于明白了，这里是我如何使用onchange方法来激发MYSQL查询并获得Highchart显示结果主要的问题是返回的JSON数组是一个需要转换为INT的字符串，然后使用resultArray变量（$（$＃$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'$'$ $ $ $ $ $ $ $ $ $ $ $' ）.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 ++;



$ b

在PHP代码中，数组必须以JSON的形式返回， p> 

  echo json_encode（$ awayRunner）;


I am continuing a previous question that was asked onclick -> mysql query -> javascript; same page

This is my onchange function for a drop down of names. it is called when each drop down is changed. The idea is to send each runners name into the php page to run a mysql query then return 3 arrays to be entered into 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();

}

my php code looks like this. As you'll see, there are 3 arrays that must be returned to be entered into different spots in the javascript to generate the code. 

$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);

currently, by doing it this way, the chart only outputs the second value in the array. for instance, if var parts is equal to 23,25,26,24,23...only 25 is shown.

A previous question resulted with the following answer -

  1. Load the page.
  2. User chooses an option.
  3. An onChange listener fires off an AJAX request
  4. The server receives and processes the request
  5. The server sends back a JSON array of options for the dependent select
  6. The client side AJAX sender gets the response back
  7. The client updates the select to have the values from the JSON array.

I'm lost on #'s 5 - 7. Can someone provide examples of code that gets this done? Normally, I would just ask for direction, but I have been stuck on this problem for days. I'm about ready to scrap the idea of having charts on my site. Thanks in advance

EDIT

this is the first change that I have made to send and receive just one request

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

The data displayed in the alertbox is in the form 12,15,16,15. Now, when I enter in data: response, only the second number from each is being displayed in the chart. Any ideas?

EDIT

OK, so i figured out that the info in response is a string. It must be converted to an INT using parseInt to be usable in the chart. currently, I have

$("#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);

will have to write a function to make this cleaner.

解决方案

I can't believe it, but I finally got it. here is how I used an onchange method to stimulate a MYSQL query and have the Highchart display the result. The major problem was that the returned JSON array was a string that needed to be converted into an INT. The resultArray variable is then used in the data: portion of the 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++;
              }

In the PHP code, the array must be returned as JSON like this

echo json_encode($awayRunner);

这篇关于onchange F（x）到php到Highchart在同一页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆