通过AJAX向PHP发布JS多维数组

Posted 2021-04-27

我有一个电子商务网站，我正试图在美国设立运输区。为此，我创建了一个拖放系统，我们有8个运输区域，您只需将状态拖动到适当的区域即可。

这有点像预期的那样工作，但我有一些问题：

1. 当你将一个状态拖入一个区域并在其上面拖动另一个状态时，它会嵌套在状态而不是放置区域中，那么是否有一种方法，如果它被放到另一个状态，它会被添加到父区域？ JS line 9-12
2. 当我尝试将它发送到我的php脚本时，它没有得到正确的选择。 ajax位之前的console.log()显示了我想要的多维数组，但我得到了post_set_blank空白响应。

为此，我的PHP脚本如下：

if(isset($_POST['shipping_zone_array']) && $_POST['shipping_zone_array']!=""){
    echo 'session_set';
}else if(isset($_POST['shipping_zone_array'])){
    echo 'post_set_blank';
}else{
    echo 'not_posted';
}

码：

function drag_start(event) {
	event.dataTransfer.dropEffect = "move";
	event.dataTransfer.setData("text", event.target.getAttribute('id'));
}

function drag_drop(event) {
	event.preventDefault();
	var elem_id = event.dataTransfer.getData("text");
	if(event.target.className == 'states'){
		console.log('in another state');
		event.target.parent.appendChild(document.getElementById(elem_id));
	}else{
		event.target.appendChild(document.getElementById(elem_id));
	}
}

var zone_1 = [];
var zone_2 = [];
var zone_3 = [];
var zone_4 = [];
var zone_5 = [];
var zone_6 = [];
var zone_7 = [];
var zone_8 = [];
var shipping_zone_array = [];

function readDropZone(){
	var shipping_zones = document.getElementsByClassName("shipping_zone");
	for(var i=1; i<=shipping_zones.length; i++){
		var shipping_zone = document.getElementById("shipping_zone_"+i);
		for(var j=1; j<=shipping_zone.children.length; j++){
			alert(shipping_zone.children[j].id);
			if(i==1){
				zone_1.push(shipping_zone.children[j].id);
			}else if(i==2){
				zone_2.push(shipping_zone.children[j].id);
			}else if(i==3){
				zone_3.push(shipping_zone.children[j].id);
			}else if(i==4){
				zone_4.push(shipping_zone.children[j].id);
			}else if(i==5){
				zone_5.push(shipping_zone.children[j].id);
			}else if(i==6){
				zone_6.push(shipping_zone.children[j].id);
			}else if(i==7){
				zone_7.push(shipping_zone.children[j].id);
			}else if(i==8){
				zone_8.push(shipping_zone.children[j].id);
			}
		}
	}
	shipping_zone_array['zone_1'] = zone_1;
	shipping_zone_array['zone_2'] = zone_2;
	shipping_zone_array['zone_3'] = zone_3;
	shipping_zone_array['zone_4'] = zone_4;
	shipping_zone_array['zone_5'] = zone_5;
	shipping_zone_array['zone_6'] = zone_6;
	shipping_zone_array['zone_7'] = zone_7;
	shipping_zone_array['zone_8'] = zone_8;
	
	console.log(shipping_zone_array);
	var formData = new FormData();
	formData.append("shipping_zone_array", shipping_zone_array);
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.onreadystatechange = function(){
		if(this.readyState == 4 && this.status == 200){
			if(this.responseText.includes('session_set')){
				console.log('session_set');
			}else if(this.responseText.includes('post_set_blank')){
				console.log('post_set_blank');
			}else if(this.responseText.includes('not_posted')){
				console.log('not_posted');
			}
		}
	};
	xmlhttp.open("POST", "mypage.php", true);
	xmlhttp.send(formData);
}

.states{
	display:inline-block;
	background-color:#CCC;
	border:1px solid #999;
	border-radius:3px;
	width:100px;
	height:40px;
	margin:5px;
	padding:5px;
	text-align:center;
	vertical-align:middle;
	cursor:move;
}
.shipping_zone{
	display:inline-block;
	background-color:#EEE; 
	border:1px solid #999;
	border-radius:5px;
	width:650px; 
	height:220px;
	margin:5px;
	padding:5px;
	text-align:center;
	vertical-align:middle;
}

<table>
<tr>
	<td>
		<div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>
		<div id="shipping_zone_2" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 2<br /></div>
		<div id="shipping_zone_3" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 3<br /></div>
		<div id="shipping_zone_4" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 4<br /></div>
		<div id="shipping_zone_5" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 5<br /></div>
		<div id="shipping_zone_6" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 6<br /></div>
		<div id="shipping_zone_7" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 7<br /></div>
		<div id="shipping_zone_8" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 8<br /></div>
	</td>
	<td>
		<div id="AL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alabama</div>
		<div id="AK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alaska</div>
		<div id="AZ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arizona</div>
		<div id="AR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arkansas</div>
		<div id="CA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">California</div>
		<div id="CO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Colorado</div>
		<div id="CT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Connecticut</div>
		<div id="DE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Delaware</div>
		<div id="FL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Florida</div>
		<div id="GA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Georgia</div>
		<div id="HI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Hawaii</div>
		<div id="ID" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Idaho</div>
		<div id="IL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Illinois</div>
		<div id="IN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Indiana</div>
		<div id="IA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Iowa</div>
		<div id="KS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kansas</div>
		<div id="KY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kentucky</div>
		<div id="LA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Louisiana</div>
		<div id="ME" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maine</div>
		<div id="MD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maryland</div>
		<div id="MA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Massachusetts</div>
		<div id="MI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Michigan</div>
		<div id="MN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Minnesota</div>
		<div id="MS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Mississippi</div>
		<div id="MO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Missouri</div>
		<div id="MT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Montana</div>
		<div id="NE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nebraska</div>
		<div id="NV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Nevada</div>
		<div id="NH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Hampshire</div>
		<div id="NJ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Jersey</div>
		<div id="NM" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New Mexico</div>
		<div id="NY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">New York</div>
		<div id="NC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Carolina</div>
		<div id="ND" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">North Dakota</div>
		<div id="OH" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Ohio</div>
		<div id="OK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oklahoma</div>
		<div id="OR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Oregon</div>
		<div id="PA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Pennsylvania</div>
		<div id="RI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Rhode Island</div>
		<div id="SC" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Carolina</div>
		<div id="SD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">South Dakota</div>
		<div id="TN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Tennessee</div>
		<div id="TX" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Texas</div>
		<div id="UT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Utah</div>
		<div id="VT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Vermont</div>
		<div id="VA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Virginia</div>
		<div id="WA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Washington</div>
		<div id="WV" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">West Virginia</div>
		<div id="WI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wisconsin</div>
		<div id="WY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Wyoming</div>
	</td>
</tr>
</table>

<center>
<button onclick="readDropZone()">Get Object Data</button>
</center>

答案

您的送货区域html <div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>还包含<br>标签。

当你循环遍历孩子for(var j=1; j<=shipping_zone.children.length; j++) {时，你也会在儿童系列中遇到<br>标签。

当你再询问<br>标签的id时，你会收到一个错误，因为它们没有id。结果是您的阵列保持空白。

因此，要么过滤掉不是<div>标记的节点，要么使用不同的数组创建方法。

我会使用一个简单的函数，立即选择正确的标签 - 只有正确的标签，没有别的 - 通过使用querySelector()查找区域元素中的类.states所有元素，而不是getElementById()区域，然后循环子项。

function drag_start(event) {
  event.dataTransfer.dropEffect = "move";
  event.dataTransfer.setData("text", event.target.getAttribute('id'));
}

function drag_drop(event) {
  event.preventDefault();
  var elem_id = event.dataTransfer.getData("text");
  if(event.target.className == 'states'){
    console.log('in another state');
    event.target.parentElement.appendChild(document.getElementById(elem_id));
  }else{
    event.target.appendChild(document.getElementById(elem_id));
  }
}
function get_states( zone_selector ) {
  return Array
    .from( document.querySelectorAll( `${ zone_selector } > .states`))
    .map( state => state.id );
}
function readDropZone(){
  var shippping_zones_object = {
    "shipping_zone_1": get_states( '#shipping_zone_1' ),
    "shipping_zone_2": get_states( '#shipping_zone_2' ),
    "shipping_zone_3": get_states( '#shipping_zone_3' ),
    "shipping_zone_4": get_states( '#shipping_zone_4' ),
    "shipping_zone_5": get_states( '#shipping_zone_5' ),
    "shipping_zone_6": get_states( '#shipping_zone_6' ),
    "shipping_zone_7": get_states( '#shipping_zone_7' ),
    "shipping_zone_8": get_states( '#shipping_zone_8' )
  };
  console.log( shippping_zones_object );
  // Continue with AJAX.
}

.states{
    display:inline-block;
    background-color:#CCC;
    border:1px solid #999;
    border-radius:3px;
    x-width:100px;
    x-height:40px;
    margin:5px;
    padding:5px;
    text-align:center;
    vertical-align:middle;
    cursor:move;
  }
  .shipping_zone{
    display:inline-block;
    background-color:#EEE; 
    border:1px solid #999;
    border-radius:5px;
    x-width:650px; 
    x-height:220px;
    margin:5px;
    padding:5px;
    text-align:center;
    vertical-align:middle;
  }

<table>
  <tr>
    <td>
    <div id="shipping_zone_1" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 1<br /></div>
    <div id="shipping_zone_2" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 2<br /></div>
    <div id="shipping_zone_3" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 3<br /></div>
    <div id="shipping_zone_4" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 4<br /></div>
    <div id="shipping_zone_5" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 5<br /></div>
    <div id="shipping_zone_6" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 6<br /></div>
    <div id="shipping_zone_7" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 7<br /></div>
    <div id="shipping_zone_8" class="shipping_zone" ondragenter="return false" ondrop="drag_drop(event)" ondragover="return false" ondragleave="return false" >Zone 8<br /></div>
    </td>
    <td>
    <div id="AL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alabama</div>
    <div id="AK" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Alaska</div>
    <div id="AZ" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arizona</div>
    <div id="AR" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Arkansas</div>
    <div id="CA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">California</div>
    <div id="CO" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Colorado</div>
    <div id="CT" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Connecticut</div>
    <div id="DE" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Delaware</div>
    <div id="FL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Florida</div>
    <div id="GA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Georgia</div>
    <div id="HI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Hawaii</div>
    <div id="ID" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Idaho</div>
    <div id="IL" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Illinois</div>
    <div id="IN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Indiana</div>
    <div id="IA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Iowa</div>
    <div id="KS" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kansas</div>
    <div id="KY" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Kentucky</div>
    <div id="LA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Louisiana</div>
    <div id="ME" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maine</div>
    <div id="MD" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Maryland</div>
    <div id="MA" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Massachusetts</div>
    <div id="MI" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Michigan</div>
    <div id="MN" class="states" draggable="true" ondragstart="drag_start(event)" ondragend="return false">Minnesota</div>
    <div id="MS" class="states" draggable="true" ondragst
以上是关于通过AJAX向PHP发布JS多维数组的主要内容，如果未能解决你的问题，请参考以下文章
 
 动态创建多维对象/数组
 无法使用 ajax 将多维数组传递给 php
 Ajax以JSON访问从PHP返回的多维数组
 求JS如何读取PHP里的多维数组?
 通过 PHP cURL 将多维数组发布到 PayPal
 thinkphp怎么将多维数组变成一维数组