コードワーファのphpとmysqlを使って作業する

Question

私はcordovaを初めて使っています。そのために構文を学んでいます。今のところ私は手動でjson dataを入力し、ユーザがdropdownからserial numberを選択すると、選択されたシリアル番号が次にjsonオブジェクトに渡され、シリアル番号と一致してチャートにデータを表示するアプリケーションを作成しました。

今私は同じことをやったphpのページを作成しました。つまり自分の要件に従ってjsonデータを作成しました。以下は、上記のコードは、私は私のjson.jsファイルへのデータのこの部分を貼り付けdrop-down

の屈折率変化で次の操作を実行し、データ

var jsonData = { 
"11111111": 
    [ 
     { "x": "2016-12-06 01:22:25", "y": 3.28 }, 
     { "x": "2016-12-06 12:44:00", "y": 3.14 }, 
     { "x": "2016-12-06 01:50:50", "y": 3.56 }, 
     { "x": "2016-12-06 02:12:22", "y": 4 }, 
     { "x": "2016-12-06 03:23:59", "y": 3.75 }, 
     { "x": "2016-12-06 04:10:15", "y": 4.12 }, 
     { "x": "2016-12-06 04:50:36", "y": 4.65 }, 
     { "x": "2016-12-06 06:26:33", "y": 4.99 }, 
     { "x": "2016-12-06 07:36:23", "y": 5.32 }, 
     { "x": "2016-12-06 09:22:45", "y": 5.76 } 
    ], 
"22222222": 
    [ 
     { "x": "2016-12-06 02:36:38", "y": 7.02 }, 
     { "x": "2016-12-06 03:30:52", "y": 7.11 }, 
     { "x": "2016-12-06 05:53:22", "y": 6.36 }, 
     { "x": "2016-12-06 06:37:32", "y": 6.95 }, 
     { "x": "2016-12-06 07:22:45", "y": 7.36 }, 
     { "x": "2016-12-06 08:45:45", "y": 7.12 }, 
     { "x": "2016-12-06 09:12:36", "y": 7.56 }, 
     { "x": "2016-12-06 10:54:54", "y": 8.65 }, 
     { "x": "2016-12-06 11:42:12", "y": 8.12 }, 
     { "x": "2016-12-06 12:39:45", "y": 8.78 } 
    ], 
"33333333": 
    [ 
     { "x": "2016-12-06 12:12:39", "y": 4.14 }, 
     { "x": "2016-12-06 01:45:39", "y": 4.69 }, 
     { "x": "2016-12-06 02:36:47", "y": 4.25 }, 
     { "x": "2016-12-06 04:46:39", "y": 4.78 }, 
     { "x": "2016-12-06 05:50:39", "y": 5.02 }, 
     { "x": "2016-12-06 06:36:15", "y": 5.19 }, 
     { "x": "2016-12-06 07:52:39", "y": 5.29 }, 
     { "x": "2016-12-06 09:23:22", "y": 5.75 }, 
     { "x": "2016-12-06 10:25:25", "y": 5.6 }, 
     { "x": "2016-12-06 11:10:39", "y": 5.45 }], 
"44444444": 
    [ 
     { "x": "2016-12-06 01:15:23", "y": 8.1 }, 
     { "x": "2016-12-06 02:25:36", "y": 8.32 }, 
     { "x": "2016-12-06 02:35:29", "y": 8.96 }, 
     { "x": "2016-12-06 03:33:36", "y": 7.95 }, 
     { "x": "2016-12-06 05:36:36", "y": 8.03 }, 
     { "x": "2016-12-06 06:45:39", "y": 8.22 }, 
     { "x": "2016-12-06 07:39:29", "y": 8.36 }, 
     { "x": "2016-12-06 08:19:59", "y": 8.69 }, 
     { "x": "2016-12-06 09:49:59", "y": 8.98 }, 
     { "x": "2016-12-06 10:48:59", "y": 8.78 } 
    ], 
"55555555": 
    [ 
     { "x": "2016-12-06 03:15:45", "y": 5.21 }, 
     { "x": "2016-12-06 04:49:36", "y": 5.89 }, 
     { "x": "2016-12-06 05:55:45", "y": 5.99 }, 
     { "x": "2016-12-06 06:20:30", "y": 6.12 }, 
     { "x": "2016-12-06 07:59:59", "y": 6.56 }, 
     { "x": "2016-12-06 08:28:46", "y": 5.59 }, 
     { "x": "2016-12-06 09:45:45", "y": 5.78 }, 
     { "x": "2016-12-06 10:50:45", "y": 6.23 }, 
     { "x": "2016-12-06 11:25:45", "y": 6.43 }, 
     { "x": "2016-12-06 11:56:12", "y": 6.89 } 
    ] 
    } 

の下に私を返している

$json = json_encode($data, JSON_PRETTY_PRINT); 
echo "var jsonData = " . $json; 
return $json; 

PHPのコードがあります

var dataPoints = []; 
    function SrNo() { 
     var e = document.getElementById("dd"); 
     var selectedVal = e.options[dd.selectedIndex].text; 
     //alert(selectedVal); 
     //selectedIndex = selectedVal; 
     dataPoints = []; 
     jsonData[selectedVal].forEach(function (data) { 
      dataPoints.push({ x: new Date(data.x), y: data.y }); 
     }); 

そして、このdataPointsをマイチャートに渡しました。

私は同じ機能を実行したいが、getの '投稿'方法を使用しています。私はシリアルナンバーを選択するたびに自分のPHPページへのリクエストを送り、私がチャートに表示したいデータを与えるたびに私が望むマニュアルデータを使いたくない。

更新されたコードの下に

がphp

$result = mysqli_query($con,$sql); 
    $data = []; 

    if($result) 
    { 
    while($row = mysqli_fetch_array($result)) 
    { 
     $serial = $row['Device_Serial_Number']; 
     $x = $row['Data_Datetime']; 
     $y = $row['Energy_kwh']; 

     // tried to add $parameter = $_GET["Device_Serial_Number"]; here and passed it in data 

     if(!isset($data[$serial])) 
     { 
      $data[$serial] = []; 
     } 
      $data[$serial][] = ['x' => $x , 'y' => (float)$y]; 

    } 

     mysqli_free_result($result); 

    } 
     // it doesn't gives me any thing 
     $json = json_encode($data[$parameter], JSON_PRETTY_PRINT); 
     echo "var jsonData = " . $json; 

更新以下2

のための私のコードは私のコードである私は、チャート

var e = document.getElementById("dd"); 
     var selectedVal = e.options[dd.selectedIndex].text; 
     //alert(selectedVal); 
     //selectedIndex = selectedVal; 

     // Send your request on server 
     $.ajax({ 
      method: "GET", 
      url: "index.php", // url to the server 
      data: { Device_Serial_Number : selectedVal } 
     }) 
     .done(function (server_data) { 
      // Decode the data from server 
      var result = jQuery.parseJSON(server_data); 
      alert(server_data); 
      dataPoints = []; 
      result.forEach(function (data) { 
       dataPoints.push({ x: new Date(data.x), y: data.y }); 
      }); 
     }) 
     .fail(function (jqXHR, textStatus) { 
      // In case of any error 
      alert("Request failed: " + textStatus); 
     }); 

を生成していますされます私は、コンソールにエラー

に任意の助けを得ています、それを実行している間

は非常にいただければ幸いです。

Answer 1

JavaScriptコードでは、サーバーにリクエストする必要があります。 jQueryとjQuery.ajax()の機能を使用することをお勧めします。これは良い動作するはず

// Get the parameter 
$parameter = $_GET["serialNumber"]; 

// Select the object for the selected serial number and return it 
$json = json_encode($data[$parameter], JSON_PRETTY_PRINT); 
return $json; 

：あなたは、あなたが送信するパラメータ（シリアル番号）で動作するようにあなたのphpファイルを変更する必要があり、サーバ上で

var dataPoints = []; 
function SrNo() { 
    var e = document.getElementById("dd"); 

    // Get the selected value 
    var selectedVal = e.options[dd.selectedIndex].text; 

    // Send your request to the server 
    $.ajax({ 
     method: "GET", 
     url: "some.php", //your url to the server 
     data: { serialNumber: selectedVal } 
    }) 
    .done(function(server_data) { 

     // Decode the data from the server 
     var result = jQuery.parseJSON(server_data); 

     // Now you can do anything you want: 
     result.forEach(function (data) { 
      dataPoints.push({ x: new Date(data.x), y: data.y }); 
     }); 
    }) 
    .fail(function(jqXHR, textStatus) { 
     // In case of error 
     alert("Request failed: " + textStatus); 
    }); 
}; 

：それはこのように好きなはずです。幸運;）