jquery ui 可从子级排序序列化

Question

我想在对图像进行排序后将包含图像路径和标题的数组发送到 PHP 脚本。 我可以在列表上执行“serialize”或“toArray”，但如何从 img 标签获取属性？

<ul class="gallery">
    <li id="li-1">
        <img src="tn/001.jpg" alt="first caption" />
    </li>
    <li mycaption="some caption" id="li-2">
        <img src="tn/002.jpg" alt="second caption with éèçà international chars" />
    </li>
</ul>

$(".gallery").sortable({
    update : function() {
        serial = $('.gallery').sortable('serialize');
        alert(serial);
        /* $.ajax({
            url: "sort.php",
            type: "post",
            data: serial,
            error: function() {alert("theres an error with AJAX");}
        }); */
    }
});

Answer 1

因此，我将如何将其序列化为具有两个成员 src_arr 和 caption_arr 的对象：

var getPaths = function() {
    var imgPaths = { 'src_arr': [], 'caption_arr': []};
    $('.gallery img').each(function(){
        imgPaths.src_arr.push($(this).attr('src'));
        imgPaths.caption_arr.push($(this).attr('alt'));
    });
    return imgPaths;
};

因此，我将使用您的代码执行此操作：

$.ajax({
    url: "sort.php",
    type: "POST",
    dataType: 'html',
    data: getPaths(),
    success: function(data, textStatus, XMLHttpRequest) {
        // you need to do something in here
        $('#debug').html('<pre>' + data + '</pre>');
    },
    error: function() {
        alert("theres an error with AJAX");
    }
});

原始数据为 sort.php 中的 print_r() 看起来像：

Array
(
    [src] => Array
        (
            [0] => tn/001.jpg
            [1] => tn/002.jpg
        )

    [caption] => Array
        (
            [0] => first caption
            [1] => second caption with éèçà international chars
        )

)