我更新了我的代码。它有 Javascript、PHP、JSON 和 JQuery。我正在读取 X,Y 坐标 MySQL 数据库。 我现在使用 3 个文件:coole_array、db_conn 和 map.php
连接:
<?php
//declaring connection
$db_user = "u";
$db_pwd = "p";
$db_server = "v";
$db_name = "sandbox";
//1. connection to the database
$conn = mysqli_connect($db_server, $db_user, $db_pwd);
//check connection
if(!$conn){
die("Database connection failed: " . mysqli_error());
}else{
echo "connected to MySQL<br>";
}
// 2. Select a database to use
$db_select = mysqli_select_db($conn, $db_name);
if (!$db_select) {
die("Database selection failed: " . mysqli_error());
}
mysqli_close($conn);
?>
在坐标数组:中,我正在制作一个多维数组,这样我就可以绘制所有的矩形 通过我的查询获取,然后我使用 json_encode($desk)。我忽略了表中的coole_id 因为我只需要 Javascript 部分的 x,y 值。
<?php
$select_coordinate_query = "SELECT * FROM coordinates";// WHERE coordinate_id ='1'
$result = mysqli_query($conn,$select_coordinate_query);
//see if query is good
if($result === false) {
die(mysqli_error());
}
//array that will have number of desks in map area
while($row = mysqli_fetch_assoc($result)){
//get desk array count
$desk = array( array("x" => $row['x_coord']),
array("y" =>
$row['y_coord'])
);
// Frame JSON
// Return the x, y JSON here
echo json_encode($desk);
} //end while loop
?>
在 map.php 中:我试图使用 JQuery 获取这些值。我想获取值并运行 循环将执行我的 Paint 函数,该函数将继续为中的每一行绘制矩形 table 。我对 JSON 和 JQuery 很陌生,并开始使用它。
<div class="section_a" >
<p>Section A</p>
<canvas id="imageView" width="600"
height="500"></canvas>
<script type="text/javascript">
$(document).ready(function(){
/* call the php that has the php array which is json_encoded */
$.getJSON('coordinate_array.php', function(data) {
/* data will hold the php array as a javascript object */
if(data != null){
$.parseJSON(data);
$(data).each(Paint(x,y)){
//get values from json
//for every row run the functionpaint by passing X,Y coordinate
});//end getJson
}//end if
}); //end rdy func
});//end func
//function to paint rectangles
function Paint(x,y)
{
var ctx, cv;
cv = document.getElementById('imageView');
ctx = cv.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
//x-axis,y-axis,x-width,y-width
ctx.strokeRect(x, y, x+100 , y+100);
}
</script>
</div> <!-- end div section_a -->
另外,当包含我的 jquery 文件时,我的语法是否正确......它与 我正在使用的所有其他文件。
我的另一个问题是:在每个文件中包含连接文件并在最后关闭它是否很好 或者在我建立连接的文件中保持连接打开?
预先感谢您,非常感谢!
最佳答案
我想建议一种更好的方法来保持代码简单和干净。
- 创建一个 Web 服务接口(interface)以返回数组中的 x,y 数据。
- 此接口(interface)可以从数据库中读取数据,并以 JSON 格式返回 x,y 坐标。
- 使用 Jquery Ajax 调用来获取这些详细信息并绘制屏幕。
- 更好地使用 RxJS 来更轻松地绘画。
以下是 Web 界面的示例代码:
<?php
// I assume you have not created connection object -- I don't see one in your code
$conn=mysqli_connect("localhost","my_user","my_password","my_db"); // replace the credentials and db name
// Check connection
$select_coordinate_query = "SELECT * FROM coordinates";
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($conn,$select_coordinate_query);
//see if query is good -- ## Better check for row count
if($result === false)
{
die(mysqli_error());
}
//array that will have number of desks in map area
while($row == mysqli_fetch_assoc($result)){ // double equal to missing...you will never receive the data
//get desk array count
//THIS IS WHERE I NEED HELP**
$desk = array( array("x" => $row['x_coord']),array("y" => $row['y_coord']) );
//x, y coordinates
$x_pos = $desk['x'];
$y_pos = $desk['y'];
//x,y width and height
$x_size = $x_pos + 40;
$y_size = $y_pos + 10;
// Frame JSON
// Return the x, y JSON here
} //end while loop ?>
这是客户端代码:
<div class="section_a" >
<p>Section A</p>
<canvas id="imageView" width="600" height="500"></canvas>
<script type="text/javascript">
function callWS()
{
// Make XHR call here and read JSON values
// Loop through and paint by calling f(Paint)
}
function Paint(x,y)
{
var ctx, cv;
cv = document.getElementById('imageView');
ctx = cv.getContext('2d');
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.strokeRect(x, y,100 , 100);
}
</script>
</div>
您可以在任何需要的情况下调用这些函数。代码未经测试。请注意,您之前曾多次创建 Canvas,但这里仅创建一次,您就可以在 Canvas 上绘制正方形。
关于javascript - MySql 和 PHP 循环绘制带有 x,y 坐标的正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26106138/