如何在 JavaScript 中从 MySQL 数据库中获取数据以构建图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35451450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fetch data from MySQL database in JavaScript to build a chart?
提问by Arthur Tarasov
I am trying to build a chart and I need to fetch data from the MySQL database table into a JavaScript variable that would be in the following format: var variable1 = [[1, 19], [2, 11], [3, 14], [4, 16]]. The first number(column) becomes xand the second is yon my chart. My table in MySQL database looks like this (I simplified it a bit):
我正在尝试构建一个图表，我需要将 MySQL 数据库表中的数据提取到一个 JavaScript 变量中，该变量采用以下格式：var variable1 = [[1, 19], [2, 11], [3, 14], [4, 16]]. 在我的图表上，第一个数字（列）变成x，第二个是y。我在 MySQL 数据库中的表看起来像这样（我简化了一点）：
column1 column2
1 19
2 11
3 14
4 16
What is the easiest way to do this? I am new to this, please excuse me for asking what might be a very simple question.
什么是最简单的方法来做到这一点？我是新手，请原谅我问一个可能非常简单的问题。
EDIT:
编辑：
With the help of Wartus' answer I coded as follows. I made two files: HTML with JavaScript and a PHP file. Here is my HTML file:
在 Wartus 的回答的帮助下，我编码如下。我制作了两个文件：带有 JavaScript 的 HTML 和一个 PHP 文件。这是我的 HTML 文件：
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script> <!-- jQuery library -->
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script> <!-- Library with charts that I plan to use -->
<script type="text/javascript">
$.ajax({
url : 'serv.php', // my php file
type : 'GET', // type of the HTTP request
success : function(result){
var obj = jQuery.parseJSON(result);
console.log(obj);
}
});
</script>
</head>
<body>
Hi
</body>
</html>
And this is my PHP file named serv.phpthat is located in the same directory as the HTML file:
这是我的名为serv.php 的PHP 文件，它与 HTML 文件位于同一目录中：
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "datadb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT column1, column2 FROM chartdata"; //This is where I specify what data to query
$result = $conn->query($sql);
echo json_encode($result);
?>
It all seems to be working without errors except that it gives out nulls when I check console:
这一切似乎都没有错误，只是当我检查控制台时它给出了空值：
Object {current_field: null, field_count: null, lengths: null, num_rows: null, type: null}
What am I doing wrong?
我究竟做错了什么？
回答by Berserk
After you have make your select in your DB you have to return the answer in json format (for me I have just make an array with the value to test) :
在您的数据库中进行选择后，您必须以 json 格式返回答案（对我来说，我只是创建了一个包含要测试的值的数组）：
Your php file (me is serv.php) :
您的 php 文件（我是 serv.php）：
$data = array([1, 19], [2, 11], [3, 14], [4, 16]);
// replace $data by your code to select in DB
echo json_encode($data);
Now you have to get the response in your javascript code. To do that you have to make a "GET" request in javascript or jQuery (jQuery in my case) :
现在您必须在您的 javascript 代码中获得响应。为此，您必须在 javascript 或 jQuery（在我的情况下为 jQuery）中发出“GET”请求：
This is your js file :
这是你的 js 文件：
$.ajax({
url : 'serv.php', // your php file
type : 'GET', // type of the HTTP request
success : function(data){
var obj = jQuery.parseJSON(data);
console.log(obj);
}
});
And in objyou have your data :
而在obj你有你的数据：
So now you have your data and to access, is an array so :
所以现在你有你的数据并访问，是一个数组，所以：
- obj[0] contains [1, 19], obj[0][0] contains 1 and obj[0][1] contains 19
- obj[1] contains [2, 11], obj[1][0] contains 2 and obj[1][1] contains 11 ...
In your case, variable1is the same as obj
在你的情况下，variable1是一样的obj
EditWith your DB :
使用您的数据库编辑：
Before to send the answer, you have to build correctly your data. So in your case, you have a multidimensional array, that what i make when I push an array in the array named data.
在发送答案之前，您必须正确构建数据。所以在你的情况下，你有一个多维数组，当我在名为data.
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "datadb";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT column1, column2 FROM chartdata"; //This is where I specify what data to query
$result = mysqli_query($conn, $sql);
$data = array();
while($enr = mysqli_fetch_assoc($result)){
$a = array($enr['column1'], $enr['column2']);
array_push($data, $a);
}
echo json_encode($data);
