JS/Jquery 填充数组然后通过 AJAX 发送

Question

我正在使用 JQuery UI 的 sortable 通过将每个元素拖动到所需的顺序来对列表 #sortable 进行排序。

我将商品的 id 存储在 li id 属性中（我知道这是无效的），以及 order< rel 属性中元素的 /code>。

例如：

<li id="23" rel="1">First</li>
<li id="20" rel="2">Second</li>
<li id="24" rel="3">Third</li>

当我拖放 li 元素时，我的代码成功更新了 rel - 这很好。

现在，当我单击提交按钮时，我想通过 AJAX 将一组数据发送到我的脚本，该脚本将执行更新查询。理想情况下，id 将是key，rel 值将是“value”。

array(
       23 => 1
       20 => 2
       24 => 3
)

到目前为止，这是我的代码：

$('#submit').click(function(e) {
   e.preventDefault();

   //array
   var the_data = [];

   $('#sortable li').each(function() {

        the_data[$(this).attr('id')] = $(this).attr('rel');

   });

   console.log(the_data);         
});

我在 FireBug 中多次收到 undefined ，但是如果我展开它，所有值都在那里，有人可以解释一下出了什么问题吗？至少对我来说这是有道理的。

将数据数组发送到 AJAX 的最佳方式是什么？我已经阅读过有关 Jquery 的 .param() 和 serialize

这方面有什么最佳实践吗？

我的阿贾克斯：

myData=Jquery.param(the_data); //serialize the array?
$.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>admin/update_order/",
                data: myData,
                success: function(msg) {
                alert('Updated'); 
                },
                error: function(msg) {
                  alert(msg);       
                }
});

谢谢。

Answer 1

我不会自己写代码。只需使用 jQuery UI Sortable 中继承的功能即可。

绑定一个停止事件函数并使用 .sortable('serialize') 以新顺序获取列表，其格式可以轻松通过 Ajax 传递。

http://jqueryui.com/demos/sortable/#method-serialize

Answer 2

如果您查看 jQuery UI 的可排序文档，它会显示 2 种方法来获取 ID 数组以满足您的目的。我会特别关注 serialize 方法，因为它更接近您想要的。特别是如果您可以放弃 rel 属性并直接转向带下划线的 id。

Answer 3

请正确遵循此链接，以对 jquery 可排序的 ajax 内容进行操作并绑定到更新函数，请参阅此 fiddle

JavaScript

$(function () {
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
$("#log").html('update called');   }
});  });



$("#search").click(function() {
               loadDrop();               
           });

function loadDrop()
        {$.ajax({
                url:'/echo/html',
                success:function(){ 
                $("#trig").html('<div><ul id="sortable" class="contentLeft"><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li><li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li></div>');
                test();
$(".contentLeft").sortable({opacity: 0.6, cursor: 'move'});

                }
            });
        }
function test(){
$( '.contentLeft' ).sortable({ opacity: 0.6, cursor: 'move', 
update: function() {
 $("#log2").html('update called via ajax');
}});
}