從數據庫中獲取數據並在拖拽中使用它下拉

我已經創建了一個拖拽的下拉頁面，其中的元素被克隆在可拖動空間中，然後存儲在數據庫中。我存儲了id，height，width， X_POS，Y_POS。所有這些工作都是在.js文件中完成的。我應該如何檢索javascript頁面中的數據？檢查元素是否先前被刪除。當我重新加載頁面時，它從頭開始，意味着必須拖動元素。誰能提供一些想法。從數據庫中獲取數據並在拖拽中使用它下拉

// 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"; 
     ?>

這裏是使用PHP也從另一個頁面即地板ID獲取數據，然後生成它，我得到的數據的基礎上，地板HTML side.I'm的代碼。我也在使用會話，就好像我選擇了樓層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>

來源

2016-04-08 Vinita Vaswani

你的'roomdata.php'是什麼樣的？ –

@David Wyly我編輯了代碼。 –

謝謝。我試圖在本地機器上重現這一點，並意識到我不知道你的HTML結構是否可以工作。你可以包括一個工作或剝離的HTML樣本？ –

您可以創建一個控制器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功能如果要在此控制器和接收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 
     } 
    ); 
}

希望這會有所幫助。

來源

2016-04-08 17:42:25

會試試看，謝謝。 –

讓我知道它是怎麼回事！幸運的是，我有一些代碼非常適用於一些非常類似的應用程序。調用後端API控制器是一種非常好的模式，當你想動態地將數據庫信息放入JavaScript前端時，所有這些都不需要重新加載頁面。 –

我只想知道在完成這個過程之後，我應該如何顯示其數據從數據庫中獲得的div標籤。 –

從數據庫中獲取數據並在拖拽中使用它下拉

回答

相關問題