文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将数据从sql转换到javascript？

问如何将数据从sql转换到javascript？
EN

Stack Overflow用户

提问于 2016-09-27 20:25:47

回答 3查看 2.2K关注 0票数 0

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

我有两个主要的文件: 1) map.php (连接到数据库并显示svg地图) 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']."

php

jquery

mysql

svg

javascript

回答 3

Stack Overflow用户

发布于 2016-09-27 20:37:58

通常你不会修改你的js文件。相反，您需要使用ajax调用从DB加载数据，然后将其“交给”您正在使用的控件。要做到这一点，你需要一个返回数据的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

票数 1

Stack Overflow用户

发布于 2016-09-27 20:41:22

首先，您的代码应该连接到数据库，提取您感兴趣的数据并从中构建一个json字符串，就像示例中的regions数据一样。您的PHP将返回此json。您可能希望使用json，因为它是对ajax/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。

票数 1

Stack Overflow用户

发布于 2016-09-28 17:51:52

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39724660

复制

相似问题

问如何将数据从sql转换到javascript？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数据从sql转换到javascript？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将数据从sql转换到javascript？
EN