gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 21:09:37 26 4
gpt4 key购买 nike

我创建了一个用于拖放的页面,其中元素被克隆到可拖动空间中,然后存储在数据库中。我正在存储 id、高度、宽度、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";
?>

这是 html 端的代码。我还使用 php 从另一个页面获取数据,即楼层 id,然后根据我获得的数据生成楼层。我还使用 session ,就好像我选择了楼层 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>

最佳答案

您可以创建一个 Controller PHP 文件(如 API 端点),JavaScript 可使用该文件从 PHP 后端请求数据库信息。

因此,对于您的 PHP Controller 文件,如下所示:

// 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 到该 Controller 并接收 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
}
);
}

希望这有帮助。

关于javascript - 从数据库中获取数据并在拖放中使用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36504899/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com