Php 将重新排序的列表的顺序提交到我的服务器

Php 将重新排序的列表的顺序提交到我的服务器,php,jquery,html,forms,post,Php,Jquery,Html,Forms,Post,请在此方面寻求一些帮助: 我在正在构建的调查中实现了拖放重新排序功能,但是我不确定在用户重新排序后如何将列表的顺序提交到我的服务器 以下是重新订购的JS: <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

请在此方面寻求一些帮助:

我在正在构建的调查中实现了拖放重新排序功能,但是我不确定在用户重新排序后如何将列表的顺序提交到我的服务器

以下是重新订购的JS:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$(  "#sortable"  ).sortable();
$(  "#sortable"  ).disableSelection();
});
</script>

$(函数(){
$(“#可排序”).sortable();
$(“#可排序”).disableSelection();
});
以及html:

<ol id="sortable">
<li><label for=""><input type="checkbox" name="resortable-option1" value="1">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option2" value="2">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option3" value="3">Option 1</label></li>
<li><label for=""><input type="checkbox" name="resortable-option4" value="4">Option 1</label></li></ol>

  • 选择1
  • 选择1
  • 选择1
  • 选择1

  • 尝试以下方法:

    $("#sortable").sortable({
          stop: function (event, ui) {
    
                //Serializes the sortable's item id's into an array of string
                var senderStrIndexArray = $(this).sortable("toArray");
    
                $.ajax({
                     type: "POST",
                     url: '...',
                     data: { senderOrderedServicesIds: senderStrIndexArray },
                });
          }           
    });
    
    $(  "#sortable"  ).disableSelection();
    

    您将发送一个包含项目排序索引的数组,然后您可以将它们写入数据库。

    尝试以下操作:

    $("#sortable").sortable({
          stop: function (event, ui) {
    
                //Serializes the sortable's item id's into an array of string
                var senderStrIndexArray = $(this).sortable("toArray");
    
                $.ajax({
                     type: "POST",
                     url: '...',
                     data: { senderOrderedServicesIds: senderStrIndexArray },
                });
          }           
    });
    
    $(  "#sortable"  ).disableSelection();
    

    您将发送一个包含项目排序索引的数组,然后将其写入数据库。

    下面是一个使用表单并提交到PHP的示例:

    行动页面:

     <?php
        if(isset($_POST["resortable-option"])){
           foreach($_POST["resortable-option"] as $item){
             echo $item."<br>";
           }
        }
     ?>
    
    
    
    HTML格式:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script>
       $(function() {
          $(  "#sortable"  ).sortable();
          $(  "#sortable"  ).disableSelection();
       });
    </script>
    <form action="ActionPage" method="post">
       <ol id="sortable">
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol>
       <input type="submit" value="send">
    </form>
    
    
    $(函数(){
    $(“#可排序”).sortable();
    $(“#可排序”).disableSelection();
    });
    
  • 选择1
  • 选择2
  • 选择3
  • 选择4

  • 下面是一个使用表单并提交到PHP的示例:

    行动页面:

     <?php
        if(isset($_POST["resortable-option"])){
           foreach($_POST["resortable-option"] as $item){
             echo $item."<br>";
           }
        }
     ?>
    
    
    
    HTML格式:

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script>
       $(function() {
          $(  "#sortable"  ).sortable();
          $(  "#sortable"  ).disableSelection();
       });
    </script>
    <form action="ActionPage" method="post">
       <ol id="sortable">
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li>
       <li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol>
       <input type="submit" value="send">
    </form>
    
    
    $(函数(){
    $(“#可排序”).sortable();
    $(“#可排序”).disableSelection();
    });
    
  • 选择1
  • 选择2
  • 选择3
  • 选择4