Question

我正在使用jQuery UI的Sortable功能制作一个小型的拖放应用程序。 jQuery工作正常，但是当我尝试按顺序编码所有行的数组时，另一端的PHP脚本将数组读为NULL，我无法弄清楚原因。这是按照第一个脚本中出现的顺序排列的所有内容：

HTML

<form method="post" id="reorder" action="orderupdate.php">
    <input type="hidden" id="post_ids" name="post_ids">
    <button type="submit">REORDER</button>
</form>

<ul id="photo-selector">
    <li id="img1"><img src="images/img1.jpg"></li>
    <li id="img2"><img src="images/img2.jpg"></li>
    <li id="img3"><img src="images/img3.jpg"></li>
    <li id="img4"><img src="images/img4.jpg"></li>
    <li id="img5"><img src="images/img5.jpg"></li>
    <li id="img6"><img src="images/img6.jpg"></li>
</ul>

JS

$(document).ready( function(){

    var formOrder = document.getElementById('reorder');
    formOrder.addEventListener('submit', function(){
        var post_ids_field= document.getElementById('post_ids');
        var ul_id = document.getElementById("photo-selector");
        var post_ids = ul_id.getElementsByTagName("li");
        post_ids_field.value = JSON.stringify(post_ids);
        alert("check");
    });

});

点击＆＃34; REORDER＆＃34;表单顶部的按钮发送到orderupdate.php，如下所示

<?php

    $post_ids = json_decode($_POST['post_ids']);
    var_dump($post_ids);

    require("opendbas3.php");

    foreach ($post_ids as $x => $value) {
        $query = "UPDATE dav_posts SET p_order='$x' WHERE post_id='$value'";
        $result = mysql_query($query, $link);
    }

?>

现在当我提交时，它会将我重定向到PHP脚本orderupdate.php它没有执行查询，我发现foreach循环无法读取$post_ids阵列。我只使用NULL获得var_dump()。此外，JS脚本中的alert并未在ready()函数或事件监听器提交时触发。它只是重定向到PHP脚本。

有什么不合适的吗？可能有什么不对？提前谢谢。

Answer 1

您不能在DOM元素上调用JSON.stringify - 这就是警报永远不会触发的原因。你会发现它与TypeError: Converting circular structure to JSON崩溃了。

您需要做的是将li数组映射到字符串数组：

var id_strings = [];
for (var i=0 ; i<post_ids.length ; i++) {
    id_strings.push(post_ids[i].getAttribute("id"));
};
post_ids_field.value = JSON.stringify(id_strings);

Fiddle demo

Answer 2

尝试使用

post_ids = $("#photo-selector").sortable( "toArray");
post_ids_field.value = JSON.stringify(post_ids);

JSON编码的数组在PHP中显示为null

2 个答案: