JavaScriptをパラメータに渡してmysqlクエリを実行し、結果を取得する

Question

いくつかの製品のボリュームをいくつかのgeojsonポリゴンでGoogle Mapに配置するデモのWebページに取り組んでいます。

Googleマップ上にボリュームを置くためのコード：今すぐ

map.data.addListener('click', function(event){ 
     //Get area-information from polygon 
     var area_information = event.feature.getProperty('area'); 
     /*var product_volume = showVolume(area_information); DOES NOT WORK 
     instead, I am sending the result to a div called p_volume and assign the value of p_volume to product_volume*/ 
     var infowWindow_contentString = '<b>Area: </b>' + area_information+ '<br>' + '<b>Volume: </b>' + product_volume; 
     polygon_infoWindow.setContent(infowWindow_contentString); 
     polygon_infoWindow.open(map); 
     polygon_infoWindow.setPosition(event.latLng); 
    }); 

showVolume（）関数：

function showVolume(area_information){ 
    var xhr; 
    var result; 
    if (window.XMLHttpRequest) { // Mozilla, Safari, ... 
     xhr = new XMLHttpRequest(); 
    }  
    else if (window.ActiveXObject) { // IE 8 and older 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    var areainfo = "areainfo=" + area_information; 
    xhr.open("POST", "get-data.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");     
    xhr.send(areainfo); 
    xhr.onreadystatechange = display_data; 
    //Display Data 
    function display_data() { 
     if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
      //alert(xhr.responseText);  
      document.getElementbyId('p_volume').textContent = xhr.responseText; 
     } 
     else { 
      alert('There was a problem with the request.'); 
     } 
     } 
    } 
}; 

GET-data.phpを呼び出します。

<?php 

$servername = "localhost"; 
$username = "username"; 
$password = "password"; 
$db_name = "mockdata"; 

$areainfo = $_POST['areainfo']; 

$con = mysqli_connect($servername, $username, $password, $db_name); 
    if (!$con) { 
     die('Could not connect: ' . mysqli_error($con)); 
} 

$stmt = $con->prepare('SELECT Volume from mockdata WHERE Area = ?'); 
$stmt->bind_param('s', $areainfo); 
$stmt->execute(); 

$result = $stmt->get_result(); 

//echo $areainfo; //Testing if parameter passed into php 

while ($row = $result->fetch_assoc()) { 
// do something with $row 
    echo "{$row["Volume"]}"; 

} 
mysqli_close($con); 
?> 

クエリごとに、私のテーブルのボリュームから1つの整数だけが必要です。私は、パラメータが取得-data.phpをするだけで

echo $areainfo; 

によって渡されてチェック私が学んだ：

var product_volume = showVolume(area_information); 

は動作しません....

編集

をそれそのように思えます。

<div><id = p_volume></div> 

がクエリ結果を取得しています。しかし、私のproduct_volumeはまだ、単に私が間違っているものを疑問に思って

product_volume = getElementbyId('p_volume').innerHTML; 

を行うことによってp_volumeから結果を得ることができませんでした。

私はこれらの3つの言語すべてに新しいです。 「xxx言語を学びましょう」と批判するときは優しくしてください。

ありがとうございます。

Answer 1

さて、私は彼らに最終的に働かせました。私のコードは、パラメータをPHPに送信し、PHPが処理するようにしていたときに正しいものでした。次に、getElementbyId('p_volume') = xhr.responseTextを実行してデータを受け取るコンテナ（<div>）が必要です。

は、次にGoogleマップ

map.data.addListener('click', function(event){ //Get FSA from polygon var areainfo = event.feature.getProperty('area'); showVolume(areainfo); var product_volume = document.getElementById("p_volume").innerHTML; var infowWindow_contentString = '<b>FSA: </b>' + FSA + '<br>' +'<b>Volume: </b>' + product_volume; polygon_infoWindow.setContent(infowWindow_contentString); polygon_infoWindow.open(map); polygon_infoWindow.setPosition(event.latLng); });

のデータは、私が本当に学びたいので、セキュリティ/医療過誤側面にコメントをしてください隠し<div><id = "p_volume", style = "display: none;">

から取得されます。

編集

更新：コードはすぐ<div>を更新しません 、それが更新されたデータを取得するために、より多くのクリックのカップルを取りました。誰かがコード内の同期の問題を説明できますか？ Googleマップのポリゴンにもマウスオーバーアクションがありますが、同じ問題があります。