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

print_r()中的sort.php原始数据如下所示：

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

    [caption] => Array
        (
            [0] => first caption
            [1] => second caption with Ã©Ã¨Ã§Ã  international chars
        )

)

来自儿童的jquery ui sortable序列化

1 个答案: