Question

我使用这个例子：https://www.sitepoint.com/dynamic-geo-maps-svg-jquery/但我需要从MySql DB获取数据。

我有两个主要文件： 1）map.php（连接到db并显示svg map） 2）map.js（用静态数据显示彩色地图）

在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']."

Answer 1

通常你不会修改你的js文件。相反，你需要使用ajax调用从数据库加载数据，然后＆＃34;给出＆＃34;它是你正在使用的控制。要做到这一点，你需要一个返回你的数据的web服务和一些调用它的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

Answer 2

首先， PHP代码应该连接到数据库，提取您感兴趣的数据并从中构建json字符串，就像示例中的regions数据一样。你的PHP将返回这个json。您可能希望使用json，因为它是最友好的ajax / js格式。

您的 JS代码应该对该PHP进行Ajax调用，以检索json格式的数据。假设您正在使用jquery，它是这样的：

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

有关jquery ajax api的更多信息和选项，请参阅http://api.jquery.com/jquery.ajax。

Answer 3

<强>的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)
    });
});
});

如何将数据从sql传输到javascript？

3 个答案: