通过 ajax 和 JQuery 将数据发送到 php 脚本答案

【问题标题】：Sending data to php script via ajax & JQuery通过 ajax 和 JQuery 将数据发送到 php 脚本
【发布时间】：2012-02-04 16:24:34
【问题描述】：

刚接触 JQuery 并试图了解所有关于发布数据的不同方式的帖子，我仍然不知道为什么我的函数不起作用。任何帮助都会受到欢迎，因为我花了几天时间试图让它发挥作用。

我有一个可排序的 ul 列表：

            <ul class="gallery" id ="gallery">
                <li id="item_59"><a href="/images/pages/apartamentos/155/image115_7.jpg" title=""><img src="/images/pages/apartamentos/155/image115_7.jpg"  alt="" /></a></li>
                <li id="item_61"><a href="/images/pages/apartamentos/155/image115_6.jpg" title=""><img src="/images/pages/apartamentos/155/image115_6.jpg"  alt="" /></a></li>
                <li id="item_62"><a href="/images/pages/apartamentos/155/image115_3.jpg" title=""><img src="/images/pages/apartamentos/155/image115_3.jpg"  alt="" /></a></li>
                <li id="item_63"><a href="/images/pages/apartamentos/155/image115_5.jpg" title=""><img src="/images/pages/apartamentos/155/image115_5.jpg"  alt="" /></a></li>
                <li id="item_64"><a href="/images/pages/apartamentos/155/image115_2.jpg" title=""><img src="/images/pages/apartamentos/155/image115_2.jpg"  alt="" /></a></li>
                <li id="item_65"><a href="/images/pages/apartamentos/155/image115_1.jpg" title=""><img src="/images/pages/apartamentos/155/image115_1.jpg"  alt="" /></a></li>
                <li id="item_66"><a href="/images/pages/apartamentos/155/image115_4.jpg" title=""><img src="/images/pages/apartamentos/155/image115_4.jpg"  alt="" /></a></li>
            </ul>

然后在同一个文档中我有这个 Jquery：

   <script type="text/javascript">

$(document).ready(function() {


        $(function(){
        $("#gallery").sortable({stop:function(event, ui) {

        $.ajax({
        type: "GET",
        url: "image_order.php",
        data: $("#gallery").sortable("serialize"),

                    success: function(data) {
                        if (data) {
                            $('#msg').html('Success');
                        } 
                    },
                    error: function () {
                        $('#msg').html('Failed');
                    }

                })
                }
            });

    }
}


</script>

然后我有一个image_order.php：

 foreach ($_GET['item'] as $position => $item) {
$query_edit = "UPDATE `image_order` SET `position` = $position WHERE `id` = $item";
mysql_query($query_edit, $ith) or die(mysql_error());
$sql[] = "UPDATE `image_order` SET `position` = $position WHERE `id` = $item";
}

echo json_encode($sql);

当您手动输入时 image_order.php?item[]=1&item[]=2&item[]=3&item[]=4 返回：

["UPDATE `image_order` SET `position` = 0 WHERE `id` = 1","UPDATE `image_order` SET `position` = 1 WHERE `id` = 2","UPDATE `image_order` SET `position` = 2 WHERE `id` = 3","UPDATE `image_order` SET `position` = 3 WHERE `id` = 4"]

我有一个类似的 json 函数可以在这个页面上运行，我看到在控制台中调用的 url 但不是这个。

我也试过 $("ul.gallery").sortable({stop:function(event, ui) {... 但这也不起作用。

帮助会很棒...请...

【问题讨论】：

是image_order.php在同一目录下的html代码吗？
是的，该函数在一个 javascript 文件中，但我粘贴在 html 中以确保
$(document).ready 和 $(function) 执行完全相同的功能，因此请删除其中一个。我不确定这是否能解决我们的问题。
谢谢罗恩，我之前没有那个，然后添加了 $(function) 看看是否有什么不同。
还有一些其他的 jquery 东西被应用到列表中，比如 fancybox...这里是 jquery lint 控制台的图像，当你拖动图像时它会发疯：link

标签： php jquery ajax post

【解决方案1】：

我必须绑定 sortstop 事件 (RTM)：

http://jqueryui.com/demos/sortable/#event-stop

  $( "ul.gallery" ).bind( "sortstop", function(event, ui) {
        $.ajax({
        type: "GET",
        url: "image_order.php",
        data: $("ul.gallery").sortable("serialize"),

                    success: function(data) {
                        if (data) {
                            $('#msg').html('Success');
                        } 
                    },
                    error: function () {
                        $('#msg').html('Failed');
                    }

                })

            });

【讨论】：