Question

我已经创建了一个用于拖放的页面，其中元素被克隆在可拖动的空间中，然后存储在数据库中。我存储了id，height，width，x_pos，y_pos。所有这些工作都在.js文件中完成。我应该如何检索javascript页面中的数据n检查元素是否先前被删除。当我重新加载页面时，它从头开始，意味着必须拖动元素。任何人都可以提出一些想法。

// JavaScript Document
$(document).ready(function () {


    var x = null;

    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit'
    });
    var i=1,j=0;
    var x1,x2,y1,y2;
    var sf=pf;                     //this is the scalig factor
    var tmp;
    var fty=ft;                     // this is the floor_type i'm getting from php page
    var fd=fid;
    $("#droppable").droppable({

      drop: function(e, ui) {

          var attr=ui.helper.attr('id');
         // document.write(attr);
          if(typeof attr == typeof undefined || attr == false)
          {
        ui.helper.attr('id',"id"+i);
          }
        x = ui.helper.clone().bind("click",'img',function(){
        alert("clicked"+ ui.helper.attr('id') );
        var cor=window.prompt("Enter coordinates width*height");
        tmp=ui.helper.attr('id');
        //document.write("position");
        var leftpos=($(this).offset().left) - 210;
        var toppos=($(this).offset().top);
        //document.write("position" + leftpos+"   " + toppos);
        var c=cor.split("*");

        var wt=c[0];
        var ht=c[1];
        var w=wt*sf;
        var h=ht*sf;

        $(this).width(w);
    $(this).height(h);
        var leftpos=($(this).offset().left)-241;
        var toppos=($(this).offset().top);
        alert("position"+ leftpos + toppos);
        window.location.href="roomdata.php?id="+tmp+"&"+"width="+w+"&"+"height="+h+"&"+"leftpos="+leftpos+"&"+"toppos="+toppos+"&"+"floor_type="+fty+"&"+"floor_id="+fd;
        });
                x.draggable({

                helper: 'original',
                containment: '#droppable',
                tolerance: 'fit'
            }); 


            x.appendTo('#droppable');
            ui.helper.remove();
             i++;
       }

    });

    });

//ROOMDATA.PHP

         <?php
          include("config.php");

     $rid=$_GET['id'];
     $wth=$_GET['width'];
     $hgt=$_GET['height'];
     $lp=$_GET['leftpos'];
     $tp=$_GET['toppos'];
     $ft=$_GET['floor_type'];
      $fid=$_GET['floor_id'];

       //echo "hello". $rid."  ".$wth."  ".$hgt."  ".$lp."  ".$tp."  ".$ft." "; 

         $sql="Insert into room_m(floor_id,room_as_id,width,height,start_x,start_y)values('".$fid."','".$rid."','".$wth."','".$hgt."','".$lp."','".$tp."')";
          $result=mysqli_query($con,$sql);

          if($result)
           {
            //echo "done";
            header("location:rooms.php");
           }
         else
            echo "error";
      ?>

这里是html side的代码。我也使用php从另一个页面获取数据，即楼层ID，然后根据我得到的数据生成楼层。我也正在使用会话，好像我已经选择了楼层id = 0然后在用户完成将房间添加到楼层之前将保持相同。如果它新的它将生成新的房间，如果它已经存在然后它将从数据库获取数据然后显示div标签。但我不知道如何显示div标签，我从中获取数据数据库中。

  <html>


    <head>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript" >
           google.load("jquery", "1.6.3");
           google.load("jqueryui", "1.8.16");
        </script>
        <link rel="stylesheet" type="text/css" href="jqueryui1.css"/>

        <!--<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>-->
        <script src="dragndrop.js" type="text/javascript"></script>
         <link rel="stylesheet" href="jqueryui-ruler/css/jquery.ui.ruler.css">
    <script src="external/jquery-1.11.1.min.js"></script>
    <script src="external/jquery-ui.min.js"></script>
    <script src="jqueryui-ruler/js/jquery.ui.ruler.js"></script>
     <script language="JavaScript">
        $(document).ready(function () {
            $('#droppable').ruler();
        });

    </script>
        <style type="text/css">
            .col{
    float:left;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
}

#col1{
    width:200px;
    height:500px;
    border:1px solid black;

}

.drag{
    width:100px;
    border:1px solid black;
    height:40px;
    position:relative;
    background-color:red;
    background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}

#droppable{
 padding-top:18px;
 padding-left:18px;
 padding-right:20px;
    border:1px solid black;
    }

        </style>
            </head>

  <body>

    <?php
    require("config.php");
     $id=$_SESSION['restid']; 
    if(isset($_SESSION['ft'])){
    $ft=$_SESSION['ft'];
    $query="select floor_id,width,height from floor_m where floor_type='".$ft."' and rest_id='".$id."'";
    $res1=mysqli_query($con,$query);
    $row1=mysqli_fetch_row($res1);
    $fd=$row1[0];
    $w=$row1[1];
    $h=$row1[2];
    echo $fd;
    $query2="select room_as_id,width,height,start_x,start_y from room_m where floor_id='".$fd."'";
    $res2=mysqli_query($con,$query2);
    $row2=mysqli_fetch_row($res2);
    $rai=$row2[0];
    $ww=$row2[1];
    $hh=$row2[2];
    $xx=$row2[3];
    $yy=$row2[4];
    echo $rai,$ww,$hh,$xx,$yy;
    $wd=500/$w;
    $_SESSION['wd']=$wd;
    $_SESSION['ft']=$ft;
    $_SESSION['fid']=$fd;
    echo '<script>var pf = '.json_encode($_SESSION['wd']).';
    var ft='.json_encode($_SESSION['ft']).';
    var fid='.json_encode($_SESSION['fid']).';</script>'; 
    $ht=$h*$wd;

    }
    else{
        $ft=$_POST['fl_type'];

    //echo $ft;


    $sql="select width,height,floor_id from floor_m where floor_type='".$ft."' and rest_id='".$id."'";
    //echo $sql;
    $res=mysqli_query($con,$sql);
    $row=mysqli_fetch_row($res);
    $w=$row[0];
    $h=$row[1];
    $fid=$row[2];
    $wd=500/$w;
    $_SESSION['wd']=$wd;
    $_SESSION['ft']=$ft;
    $_SESSION['fid']=$fid;
    echo '<script>var pf = '.json_encode($_SESSION['wd']).';
    var ft='.json_encode($_SESSION['ft']).';
    var fid='.json_encode($_SESSION['fid']).';</script>'; 
    $ht=$h*$wd;
    }
    //echo $wd,$ht;
    ?>
        <div id="wrapper">
            <div class = "col" id="col1">
                <img src="" id="drag1" class="drag">                
            </div>
            <div class="col" id="droppable" style="width:500px;position:relative; height:<?php echo $ht;?>">

            </div>
        </div>
    </body>
     </html>

Answer 1

您可以创建一个控制器PHP文件（如API端点），javascript可以使用该文件从PHP后端请求数据库信息。

因此对于您的PHP控制器文件，如下所示：

// getRoom.php

// {include your database config here}

function fail($message = null,$code = 500) {
    http_response_code($code);
    exit($message);
}

function success($payload = null, $code = 200) {
    http_response_code($code);
    exit($payload);
}

if (!isset($_POST['room_id'])) {
    fail("'room_id' parameter must be in POST request",404);
}

$room_id = $_POST['room_id'];

// WARNING: you should be using prepared statements; this query is subject to SQL injection!
$sql = "SELECT * FROM room_m WHERE room_id = $room_id"; // just a guess
result = mysqli_query($con,$sql);

if (!$result) {
    fail("Could not find room $room_id",404);
}

$payload = json_encode($result);
success($payload);

然后，您可以使用JQuery AJAX函数POST到此控制器并接收javascript可以解释的响应;所有没有重新加载页面：

function getRoom(room_id) {
    data = {
        'room_id': room_id
    };
    $.post(
        'getRoom.php',
        data
    ).done(
        function (data) {
            // parse the JSON response
            var response = jQuery.parseJSON(data);

            // log it in the console for debugging purposes
            console.log(response);

            // call a function that sets the dimensions for the room
            setDimensions(response);
        }
    ).fail(
        function (xhr) {
            // log it in the console for debugging purposes
            console.log(xhr);

            // do something
        }
    );
}

希望这有帮助。

从数据库中获取数据并在拖放时使用它

1 个答案: