Question

如何获取LOCAL页面DIV内容并发布

基本上让我解释一下我的问题

在此页面jSFiddle

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var new_img = $('#' + data).clone();
    $('#' + ev.target.id).html(new_img);
}    
</script>

我允许使用将图像拉入div。现在我想添加一个表单方法帖子和一个提交按钮

在提交时，它会发布到page2.php和page2.php需要获取2 div square的内容，其中包含用户拉入的图像“name”或“id”，或者可以说当前div内容为user选择。

我怎样才能做到这一点。谢谢！看看我的jsFiddle页面，以便更好地了解我的问题:)

谢谢！

我能想到的一件事是使用隐藏字段。我创建了4个隐藏字段，即div1_selection，div2_selection，div3_selection，div4_selection，它们的值在初始时为空。

当Drag＆amp; drop，它们的值将是img的id。我的问题是如何获取img的值，该值是drop并设置在隐藏字段中（如果隐藏字段方法工作）

更新后的尝试：

<script>
$(document).ready(function(){
 $("#sub").submit(function(){
  var img1  =   $($("#div1").html()).attr("id");
  var img2  =   $($("#div2").html()).attr("id");
  var img3  =   $($("#div3").html()).attr("id");
  var img4  =   $($("#div4").html()).attr("id");
  $.ajax({
    url: 'setImage.php?img1='+$img1+'&img2='+$img2+'&img3='+$img3+'&img4='+$img4,
    type: 'GET',
    success: function (data) {$("#newhtml").html(data);}
    });
  });
});
</script>
<form action="" method="post" id="sub">
// some codes as on jsFiddle
<div id="newhtml"></div>

我的setImage.php代码

<?php
$img1 = $_GET['img1'];
$img2 = $_GET['img2'];
$img3 = $_GET['img3'];
$img4 = $_GET['img4'];
echo "IMG 1" . $img1 . " | IMG 2 " . $img2 . " | IMG 3 " . $img3 . " | IMG 4 " . $img4;
?>

我尝试在newhtml上显示返回结果但不起作用。我做的ajax实现有什么问题吗？

由于

最新更新：

<script>
$(document).ready(function(){
     $("#input").click(function(){  var img1  = $($("#div2").html()).attr("id");
  var img1  = $($("#div3").html()).attr("id");
  var img2  = $($("#div3").html()).attr("id");
  var img3  = $($("#div3").html()).attr("id");
  var img4  = $($("#div4").html()).attr("id");
$.ajax({
url: 'setImage.php',
data:{image1:img1,image2:img2,image3:img3,image4:img4},
type: 'GET',
success: function (data) {
alert(data)
$("#newhtml").html(data);
}
});

  });
});
</script>

该变量未发送过，它只返回默认的回显消息，但它似乎无法捕获img1，img2，img3，img4

的值

Answer 1

获取图片的ID：

<script>
$(document).ready(function(){
 $("#sub").submit(function(){
  var img1  = $($("#div2").html()).attr("id");
  var img2  = $($("#div3").html()).attr("id");
  var img3  = $($("#div3").html()).attr("id");
  var img4  = $($("#div4").html()).attr("id");

$.ajax({
url: 'setImage.php',
data:{image1:img1,image2:img2,image3:img3,image4:img4},
type: 'GET',
success: function (data) {
alert(data)
$("#newhtml").html(data);
}
});

  });
});
</script>

Html代码：添加表单标记

<form action="" id="sub">
<table>
<tr>
<td><p><b>Main Image</b></p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div></td>
<td><p><b>Image 2</b></p><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </td>
<td><p><b>Image 3</b></p><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
</table>

 <img id="drag1" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/2013/02/thumbnail32.jpg" alt="img01"/></a>
 <img id="drag2" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)" src="http://netdna.webdesignerdepot.com/uploads/html5-css3-wireframing/html5-logo.jpg" alt="img02"/></a>
 <img id="drag3" ondrop="drop(event)" draggable="true" width="150" height="150" ondragstart="drag(event)"src="http://netdna.webdesignerdepot.com/uploads/2012/12/thumb-1.jpg" alt="img03"/></a>
 <input type="submit" value="send">
 </form>

如何获取LOCAL页面的DIV内容和帖子

1 个答案: