0
Я начну с вопроса: у меня есть файл php, который запрашивает базу данных MySql, результат я хочу поместить в массив javascript, чтобы я мог построить его (используя флоп jQuery). Кто-нибудь знает, как это сделать?Как импортировать данные из php-файла в переменную javascript
Что я сделал до сих пор, который работает:
- У меня есть очень хороший JQuery-ФЛОТ код, который Земельныe участки диаграммы. обратите внимание, что наиболее важной переменной для этого вопроса в этом коде является «data1».
- AJAX (с PHP файла), который выводит данные из базы данных MySQL
Я хочу поставить в «data1» переменной (в Jquery-Flot кода), данные из базы данных (время и Data), но я не нашел способ «подключить» результат файла php с переменной data1.
JQuery-Flot диаграмма построения кода (пожалуйста, обратите внимание 'data1' переменная):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Flot Example</title>
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.selection.js"></script>
</head>
<body>
<h1>Flot Examples</h1>s
<div id="placeholder" style="width:600px;height:300px"></div>
<div id="overview" style="width:160px;height:100px"></div>
<script type="text/javascript">
/*Show Tooltip*/
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
//End of Tooltip
var data, data1, options, optionsOverview, chart, overview;
var data2 = [],
data3 = [];
data1 = [
[1, 4],
[2, 5],
[3, 6],
[4, 9],
[5, 7],
[6, 6],
[7, 2],
[8, 1],
[9, 3]
];
for (var i = 1; i < 10; i++) {
data2.push([i, i * 2])
}
for (var i = 1; i < 10; i++) {
data3.push([i, 10 * Math.random()])
}
data = [{
data: data1,
label: "fixed",
lines: {
show: true
}
}, {
data: data2,
label: "linear",
lines: {
show: true
},
points: {
show: true
}
}, {
data: data3,
label: "random",
bars: {
show: true,
barWidth: 0.5
}
}];
options = {
legend: {
position: "nw"
},
grid: {
clickable: true,
hoverable: true
}
};
//SELECTION
optionsOverview = {
legend: {
show: false
},
selection: {
mode: "xy"
}
};
$(document).ready(function() {
chart = $.plot($("#placeholder"), data, options);
//SELECTION
overview = $.plot($("#overview"), data, optionsOverview);
});
/*SELECTION*/
$("#overview").bind("plotselected", function (event, ranges) {
chart.setSelection(ranges);
});
$("#placeholder").bind("plotselected", function (event, ranges) {
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
}
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
}
plot = $.plot("#placeholder", data,
$.extend(true, {}, options, {
xaxis: {
min: ranges.xaxis.from,
max: ranges.xaxis.to
},
yaxis: {
min: ranges.yaxis.from,
max: ranges.yaxis.to
}
})
);
overview.setSelection(ranges, true);
});
//End of Selection
/*Show Tooltip*/
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#tooltip").remove();
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY, item.series.label + " of " + x + " - " + y);
}
});
//End of Tooltip
</script>
<br /><br /><br />
</body>
</html>
с другой стороны, у меня есть БД MySQL:
mysql> select * from example5;
+------+------+
| time | data |
+------+------+
| 1 | 1 |
| 1 | 2 |
| 2 | 3 |
| 3 | 6 |
| 4 | 9 |
| 5 | 10 |
| 6 | 15 |
| 7 | 20 |
+------+------+
8 rows in set (0.00 sec)
который Я обращаюсь к файлу ajax/php: index.html:
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getdata.php?q=" + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select Time:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="4">7</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
и getdata.php:
<?php
$q=$_GET["q"];
$con = mysqli_connect('localhost','root','12345678','test');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"test");
$sql="SELECT * FROM example5 WHERE time = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>Time</th>
<th>Data</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['time'] . "</td>";
echo "<td>" . $row['data'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Спасибо за вашу помощь, Ноам
было бы проще использовать JSON вместо HTML/XML для ответа AJAX. Просто повторите строки PHP $ в виде строки JSON и JavaScript снова расшифрует эту строку в массиве. Всего две строки кода. Пример: http://www.caveofprogramming.com/php/php-json-an-example-javascript-json-client-with-php-server/ – TheBronx