Question

我更新了我的代码。它有Javascript，PHP，JSON和JQuery。我正在读X，Y坐标 MySQL数据库。我现在使用3个文件：coordinate_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); 
 ?>

在 coordinate_array：我正在创建一个多维数组，所以我可以绘制所有的矩形通过我的查询获取，然后我使用json_encode（$ desk）。我忽略了表中的coordinate_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函数的循环，该函数将继续绘制每个行中的矩形表。我是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文件时，我是否拥有正确的语法..它与...相同我正在使用的每个其他文件。

我遇到的另一个问题是：在每个文件中包含连接文件并在最后关闭它是否合适或者在我建立连接的文件中打开连接？

提前谢谢你，非常感谢！

Answer 1

我想建议一种更好的方法来保持代码简单和干净。

创建一个Web服务接口，以返回数组中的x，y数据。
此接口可以从数据库中读取，并返回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，但在此处创建了一次，您可以在画布上绘制方块。

MySql和PHP循环用x，y坐标绘制正方形

1 个答案: