sqlからjavascriptにデータを転送するには？

私はこの例で作業します：https://www.sitepoint.com/dynamic-geo-maps-svg-jquery/しかし、私はMySql DBからデータを取得する必要があります。sqlからjavascriptにデータを転送するには？

私は主に2つのファイルがあります：JSファイルで 1）map.php（DBに接続し、SVGの地図を表示） 2）map.js（静的データと色付け地図を表示）

を、私は行を参照してください。

enter code here 
var regions=[ 
    { 
     "region_name": "Lombardia", 
     "region_code": "lom", 
     "population": 9794525 
    }, 
    { 
     "region_name": "Campania", 
     "region_code": "cam", 
     "population": 5769750 
    }, 
    // etc ... 
];

dbからの値に地域名の変更値が必要です。しかし、私はどのようにしないのですか？私のPHPの主変数で

は以下のとおりです。

echo "Region: ".$row['region_name']." 
echo "Code of region: ".$row['region_code']." 
echo "Value: ".$row['value']."

出典

2016-09-27 Igor-Potapov

あなたは希望を取得するために、（AJAXと） 'map.php'ファイルへのリクエストを行う必要がありますJSONやJSコールバックメソッドでフォーマットされたデータを配列に挿入します。 –

JQueryには、使用できるAJAX関数があります。 AJAXでは、ページをポストすることなく、サーバー側からデータベースにアクセスすることができます。ここに、JQueryのajaxドキュメントへのリンクがあります：http://api.jquery.com/jquery.ajax/ –

私はphpまたはjsファイルを変更する必要がありますか、または新しいファイルを作成しますか？ –

は通常、あなたのJSファイルを変更することはありません。代わりに、DBから、つまりajax呼び出しを使用してデータをロードし、使用しているコントロールに「与える」必要があります。これを行うには、データを返すウェブサービスとそれを呼び出すjavascript関数が必要です。あなたはこのような何かを行うことができます。

var jqxhr = $.get("map.php", function() { 
    alert("success"); 
}).done(function(data) { 
    refresh_your_map(data); 
});

詳細編

のチェックhttps://api.jquery.com/jquery.get/ - このような何かを：

/* define this function in your js file*/ 
var getRegionsData = function() 
{ 
    var result =[]; 
    $.ajax({ url: 'map.php', 
     async: false, 
     dataType: 'json', 
     success: function(data) { 
      result = data; 
     } 
    }); 
    return result; 
} 

//then do this 
var regions=getRegionsData(); 
//the rest of your code from map.js

出典

2016-09-27 12:37:58 vhr

'refresh_your_map（data）;は何ですか？ 'region_name'のようなPHPからの私のvarですか？ –

これは、取得したSQLデータの処理/バインディングのようなロジックを含むことができる、選択した関数名です。検索した地域の色を変更するなど – vhr

あなたは以下のリストをチェックできますか？私はmap.jsファイルに書く必要があるか分からない –

すべてのPHPコードの最初にデータベースに接続する必要がありますあなたの例のregionsのデータのように、関心のあるデータを抽出してjsonの文字列を作成します。あなたのPHPはこのJSONを返します。あなたはおそらくjsonで作業したいと思うでしょう。なぜなら、それは最もajax/jsフレンドリーな形式なのでです。

JSコードは、JSON形式のデータを取得するためにそのPHPにAjaxコールを行う必要があります。 jqueryのAJAX APIについての更なる情報およびオプションについては

$.ajax({ 
    url : "map.php", 
    dataType : "json", 
    done: function(data){ 
     // the data parameter is the json returned by the php 
     // already converted to javascript object... 
     // Just like the regions array from your example. 
    } 
});

、http://api.jquery.com/jquery.ajaxを参照してください：あなたはjqueryのを使用していると仮定すると、それはこのようなものです。

出典

2016-09-27 12:41:22 DGardim

私はそれをやってみるのは難しいです：私のPHPの文字列には： 'echo" Region： "。$ row ['region_name']。" エコー "地域のコード："。$ row ['region_code']。 " echo "Value："。$ row ['value']。 "' –

私の関数（data）にregion_nameを追加した場合、結果はhavent'tになります –

あなたのPHPはこのようなものです：echo ''{" regions " $ row ['region_code'] ''、 "population"： "'。$ row [' value ']]' ''。そして、例えば、PHPによって返される最初の領域の人口を取得するためのjsは、次のようになります： 'var value = data.regions [0] .population;' – DGardim

のindex.php

enter code here 
<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link href="map.css" rel="stylesheet" media="all"> 
<script type="text/javascript" src="jquery-3.1.1.js"></script> 
<script src="map.js"></script> 
<title>Моя карта</title> 
</head> 
<body> 
<?php 
$servername = "localhost"; 
$username = "happy_user"; 
$password = "1234567890"; 
$dbname = "freesite_zzz_com_ua"; 
// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
die("Connection failed: " . $conn->connect_error); 
} 
$sql = "SELECT region_name, region_code, value FROM map"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
// output data of each row 
while($row = $result->fetch_assoc()) { 
    echo "region_name: " . $row["region_name"]. " region_code: " .   
$row["region_code"]. " value: " . $row["value"]. "<br>"; 
} 
} else { 
echo "0 results"; 
} 
$conn->close(); 
?> 

<h1>svg map</h1> 

<div class="map"> 

<svg version="1.1" id="map_x5F_id" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="595.3px" height="841.9px" viewBox="0 0 595.3 841.9" style="enable-   
background:new 0 0 595.3 841.9;" xml:space="preserve" 
> 

<g id="id_x5F_1"> 
<rect x="58" y="163" width="85" height="85"/> 
</g> 
<g id="id_x5F_2"> 
<rect x="143" y="163" width="85" height="85"/> 
</g> 
<g id="id_x5F_3"> 
<rect x="228.1" y="163" width="85" height="85"/> 
</g> 
</svg> 
</div> 
</body> 
</html>

map.js：

var regions=[ 
{ 
    "region_name": "region-1", 
    "region_code": "id_x5F_1", 
    "value": "10" 
}, 
{ 
    "region_name": "region-2", 
    "region_code": "id_x5F_2", 
    "value": "20" 
}, 
{ 
    "region_name": "region-3", 
    "region_code": "id_x5F_3", 
    "value": "30" 
} 
]; 

var temp_array = regions.map(function(item){ 
return item.value; 
}); 

var highest_value = Math.max.apply(Math, temp_array); 

$(function() { 

for(i = 0; i < regions.length; i++) { 

    $('#'+ regions[i].region_code) 
    .css({'fill': 'rgba(11, 104, 170,' + regions[i].value/highest_value  
+')'}) 
    .data('region', regions[i]); 
} 

$('.map g').mouseover(function (e) { 
    var region_data=$(this).data('region'); 
    $('<div class="info_panel">'+ 
     region_data.region_name + '<br>' + 
     'value: ' + region_data.value.toLocaleString("en-UK") + 
     '</div>' 
    ) 
    .appendTo('body'); 
}) 
.mouseleave(function() { 
    $('.info_panel').remove(); 
}) 
.mousemove(function(e) { 
    var mouseX = e.pageX, //X coordinates of mouse 
     mouseY = e.pageY; //Y coordinates of mouse 

    $('.info_panel').css({ 
     top: mouseY-50, 
     left: mouseX - ($('.info_panel').width()/2) 
    }); 
}); 
});

出典

2016-09-28 09:51:52

sqlからjavascriptにデータを転送するには？

答えて

関連する問題