Question

我正在尝试访问php中的无序列表元素，因此我可以将它们插入到数据库中，我需要能够通过位置访问它们，但我不知道如何在PHP中执行此操作。我正在使用jQuery，以便列表在客户端可以排序。在Javascript中，可以使用

访问它

alert($("#sortable li:first").text() + ' is first ' + $("#sortable   li:eq(1)").text()    + ' is second ' + $("#sortable li:eq(11)").text() + ' is last');

我正在使用的列表位于http://jsfiddle.net/mMTtc/

我只是在寻找帮助，如何将这些列表项存储在php变量中，即假设我想要第6个元素基于用户如何订购列表。我该怎么做？

由于

Answer 1

使用以下代码，您可以在用户更改前端元素的顺序时向PHP后端发送更新：

$("#sortable").on("sortupdate", function() {
    var dataArr = [];
    $("#sortable li").each(function(idx, elem) {
        dataArr[idx] = $(elem).html();
    });
    var dataStr = '{"newOrder":' + JSON.stringify(dataArr) + '}';
    $.ajax({
        url: "<url_to_php_file>",
        data: dataStr
    });
    // alert(dataStr);
});

实例（前端部分）：here

您必须将<url_to_php_file>替换为PHP文件的路径，该路径用于处理元素顺序（即将它们保存在数据库中）。该文件将能够使用json_decode($_POST["newOrder"])在正常的PHP Array中访问用户定义的顺序，即

...
$newOrder = json_decode($_POST["newOrder"]);
for ($i = 0; $i < count($newOrder); $i++) {
    echo("The item labeled '" . $newOrder[$i] . "' is placed by the user at index " . $i . ".\n";
    /* 1st item: index 0 */
    /* 2st item: index 1 */
    /* ... */
}

实施例：您向用户显示一个可排序列表，其中包含以下项目： item1 ， item2 ， item3 （按此顺序）。
用户在 item1 之前放置 item2 ，此时进行AJAX调用，将数组["item2", "item1", "item3"]传递给服务器（注意顺序）。上面的片段将回应：

The item labeled 'item2' is placed by the user at index 0.
The item labeled 'item1' is placed by the user at index 1.
The item labeled 'item3' is placed by the user at index 2.

（当然，您不会回显任何内容，而是为每个项目更新数据库中索引字段的值，或者做一些有用的事情。）

Answer 2

您可以使用DomDocument来解析HTML。这可以通过使用loadHTML()的字符串完成，也可以使用loadHTMLFile()加载外部HTML文件。

此示例使用loadHTML()：

<?php

  $html = '<html>
    <body> 
    <ul id="sortable">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ul>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    </body>
    </html>';

$dom = new DomDocument;
$dom->loadHTML($html);

$li = $dom->getElementsByTagName('li');

// Print first item value
echo $li->item(0)->nodeValue;

// Print third item value
echo $li->item(2)->nodeValue;

Answer 3

这就是我要做的事情，它当然不是最干净的方式，但它应该有效。

这假设您正在使用自己的页面，而不是您通过http请求将页面html获取到某个外部站点（例如通过CURL）并需要解析它的场景。 DOMDocument适用于后一种情况。这个解决方案适用于前者，因为我假设因为你在客户端使用javascript，它可能是你自己的页面（除非你在加载后将javascript注入页面）。 / p>

首先，在每个列表项中，我都包含一个服务器端可访问的输入标记。它将用于跟踪位置和值，并在表单提交时将其传递给服务器端脚本。

<form method="POST">
  <ul id="sortable">
    <li class="ui-state-default">1
      <input id="the_list_item_1" name="the_list_item[]" type="text" value="1_0" style="display: none;">
    </li>
    ...
  </ul>
</form>

该值是项目的实际值（示例中它们的范围是1 - 12），它的位置由下划线（值+“_”+位置）分隔;

如果您只需要将列表提交给服务器以便在用户完成时进行处理，则列表需要位于表单变量中。但是，如果您打算只使用Ajax将数据传输到服务器，那么这个解决方案并不是必需的（因为您只需使用jquery获取每个位置和值对并直接在您的ajax调用中发送它们）。

当用户拖动项目并更改列表的顺序时，您需要处理更新这些输入标记。如果您需要了解如何使用可排序事件，请参阅here。也许，在更新时，对于每个列表项，使用新位置调用此函数：

function update_pos(value,pos)
{
  $("#the_list_item_"+value).val(value+"_"+pos);
}

因此，在表单提交方面，我们现在处于PHP方面。

$list_items = $_POST["the_list_item"]; // This is basically an array of all the list_items, thanks to naming all the list items with "the_list_item[]",  note the empty subscript (square braces).

$ordered_list_items = array();  // Let's push them into an associative array.

foreach($list_items as $li)
{
  $li_split = explode("_",$li);
  if(count($li_split) <= 0)
    continue;  // maybe you'd want to handle this situation differently, it really shouldn't happen at all though.  Here, I'm just ignoring nonsensical values.
  $item_id = $li_split[0];
  $pos = $li_split[1];
  $ordered_list_items[$item_id] = $pos;
}

// Then later you can shoot through this list and do whatever with them.
foreach($ordered_list_items as $item_id => $pos)
{
   // postgres perhaps. Insert if not already there, update regardless.
   pg_query("insert into the_list_item (item_id,position) select '$item_id','$pos' where '$item_id' not in (select item_id from the_list_item where '$item_id' = item_id limit 1));
   pg_query("update the_list_item set position = '$pos' where item_id = '$item_id'");
}

当然，所有这一切，根据您的需要，您可能需要将此数据重新加载到页面上。因此，循环遍历db结果（可能是为该用户），您将每个list_item输出到位。

$list_items = pg_fetch_all(pg_query($sql)); // $sql needs to be the query to get the results. Probably should order by position ascending.

$lic = count($list_items);
?>
<html> and stuff

<form method="POST">
  <ul id="sortable">
<?php
for($i = 0; $i < $lic; $i++)
{
  $li = $list_items[$i];
  echo "<li class=\"ui-state-default\">".$li["item_id"]."<input id=\"the_list_item_".$li["item_id"]."\" name=\"the_list_item[]\" type=\"text\" value=\"".$li["item_id"]."_".$li["position"]."\" style=\"display: none;\"></li>";
}
?>
</ul>
</form>

在PHP中访问HTML无序列表元素

3 个答案: