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

【问题标题】：JS/Jquery populating array then sending via AJAXJS/Jquery 填充数组然后通过 AJAX 发送
【发布时间】：2011-08-14 02:43:48
【问题描述】：

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

我将项目的id 存储在li id 属性中（我知道这是无效的），并将元素的order 存储在rel 属性中。

例如：

<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 值将是`值。

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

有没有这方面的最佳实践？

我的 ajax：

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

谢谢。

【问题讨论】：

标签： jquery ajax arrays jquery-ui-sortable

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

如果您查看 jQuery UI 的可排序文档，它会显示 2 种方法来获取 ID 数组以供您使用。我会特别关注serialize 方法，因为它更接近你想要的。尤其是如果您可以放弃 rel 属性而只移动到带下划线的 id。

【讨论】：

【解决方案3】：

请点击此链接正确处理可排序的 ajax 内容并绑定到更新函数的 jquery，请参阅此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');
}});
}

【讨论】：