Question

我是Jquery / Ajax的新手，我试图获取Sortable脚本以将某些值传递给PHP脚本。

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

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

我尝试过：

.../members/me/my-profile-menu/test/

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

HTML：

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

脚本：

<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>

我希望输出变量“ serial”为=

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',
        });
    }
});

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)，则将获得“数字1，数字2，数字3”

如何将变量按顺序传递给PHP？

2 个答案: