如何在排序时将变量传递给 PHP？

Question

我是 Jquery/Ajax 的新手 - 我正在尝试让 Sortable 脚本将一些值传递给 PHP 脚本。

我正在尝试使用此方法，因为它具有一些不错的 UI 功能： https://sortablejs.github.io/Sortable/

文档：https://github.com/SortableJS/Sortable/blob/master/README.md#toarraystring

我试过：

var serial = $('#route_list_new').sortable("toArray").val();
var serial = $('#route_list_new').val();
var serial = $("#route_list_new").sortable('serialize');

但我似乎无法获得实际内容，我认为错误可能完全出在其他地方。（我对此很陌生）

HTML:

<div id="route_list_new" class="list-group col sortable-list">
  <div class="list-group-item"><p>Number 1</p></div>
  <div class="list-group-item"><p>Number 2</p></div>
  <div class="list-group-item"><p>Number 3</p></div>
</div>

脚本：

route_list_new = document.getElementById('route_list_new');
new Sortable(route_list_new, {
    group: 'shared',
    animation: 250,
    onSort: function (event, ui) {
        var serial = $("#route_list_new").sortable('serialize');
        $.ajax({
            data: { serial },
            type: 'POST',
            url: 'sortable.php',
        });
    }
});

我希望输出变量"serial"为=

"Number 1, Number 2, Number 3"

Answer 1

您可以简单地使用 this.toArray()。

但是，这不会为您提供项目的文本值，而是它们的 data-id 属性，as per the docs。

所以你应该改变你的项目：

<div class="list-group-item"><p>Number 1</p></div>

对此：

<div class="list-group-item" data-id="number1"><p>Number 1</p></div>

其中 number1 唯一标识您的项目（不必与其文本相同）。

route_list_new = document.getElementById('route_list_new');
new Sortable(route_list_new, {
  group: 'shared',
  animation: 250,
  onSort: function(event, ui) {
    var sorted = this.toArray();
    console.log(sorted);
    $.ajax({
      data: {sorted},
      type: 'POST',
      url: 'sortable.php',
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<div id="route_list_new" class="list-group col sortable-list">
  <div class="list-group-item" data-id="number1"><p>Number 1</p></div>
  <div class="list-group-item" data-id="number2"><p>Number 2</p></div>
  <div class="list-group-item" data-id="number3"><p>Number 3</p></div>
</div>

Answer 2

只需更改：

var serial = $("#route_list_new").sortable('serialize');

收件人：

var serial = getSerial();

然后添加如下函数：

function getSerial() {
    let items = $("#route_list_new").find('.list-group-item > p'),
        serial = '';

    $.each(items, function(i, num){
        num = $(num);
        serial += num.html() + ', '
    });

    serial.slice(0,-2);

    return serial
}

如果你做 console.log(serial) 你会得到 "Number 1, Number 2, Number 3"

如何在排序时将变量传递给 PHP？

How do I pass variables to PHP on sort?

javascript

jquery

jquery-ui