jquery - 将列表元素发送到 POST 表单

Question

我有一个页面，用户可以在 <li> 中选择值对象并将它们放入另一个 <li>目的。 (这是使用 jQueryUI 完成的)

我想通过 POST 请求将用户选择的元素发送到后端。目前，如果我打印 session ( print(request.POST) )，它不会显示 <li>对象。

据我了解，这是正确的，因为您需要 <input>标签。我怎样才能实现这种行为？

我见过this问题是同样的问题，但答案不完整，而且有点旧。

查看

def page(request):
    li_dict = {
        'a': 'A',
        'b': 'B',
        'c': 'C',
        'd': 'D',
    }
    
    # ...
    
    # POST logic
    if request.method == "POST":
        # do stuff..
        
    #...
    
    context = {'groups_variable_list': li_dict}
    return render(request, 'page.html', context=context)

HTML

<div>
    <ul id="sortable1" class="connectedSortable">
        {% for key, value in groups_variable_list.items %}
        <li value={{key}}>{{value}}</li>
        {% endfor %}
    </ul>
</div>


<div>
<form action="" method="POST">
    {% csrf_token %}
        <ul id="sortable2" class="connectedSortable">
                                                        <!-- list filled by user with drag&drop --> 
        </ul> 
        <input type="submit" name="Submit">             <!-- button for POST request -->
</form>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- jQuery UI for Sortable function -->
<script>
    // sortable jQueryUI
    $(document).ready(function() {
        $( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    });
</script>

Answer 1

您可以编写 jquery 代码来附加 inputs上receive sortable 的方法。所以，无论何时 li放在里面ul你可以，如果id ul 是 sortable2如果是，则获取 li 的值并将输入附加到 form 内的某个 div否则如果li删除只需使用 .remove()从表单中删除它。

演示代码:

$(document).ready(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    receive: function(e, ui) {
      //get value and name
      var values = $(ui.item).attr("value")
      var name = $(ui.item).text()
      //check if the ul where li is receive is sortable 2( inside form)
      if ($(this).attr("id") == "sortable2") {
        //append input with values
        $(this).closest("form").find(".tosubmit").append("<input type=text value=" + values + " name=" + name + ">")
      } else {
        //remove input if remove from form
        $("input[name=" + name + "]").remove();

      }
    }
  }).disableSelection();
});

<div>
  <ul id="sortable1" class="connectedSortable">

    <li value="1">A</li>
    <li value="2">B</li>
    <li value="3">C</li>

  </ul>
</div>


<div>
  <HR>
  <form action="" method="POST">

    <ul id="sortable2" class="connectedSortable">
      <li value="4">D</li>
      <!-- list filled by user with drag&drop -->
    </ul>

    <div class="tosubmit">
    <input type="text" value="4" name="D">
    </div>
    <input type="submit" name="Submit">
    <!-- button for POST request -->
  </form>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

或者您可以使用 ajax 提交您的数据.为此创建 json-array lis的与 key-value单击 submit 进行配对按钮。

演示代码:

$(document).ready(function() {
  $("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
  }).disableSelection();
});

$("input[type=button]").click(function() {
  var main_array = []
  $("#sortable2 li").each(function() {
    var key = $(this).attr("value");//gets valus
    var value = $(this).text()
    //push value in main array
    main_array.push({
      "key": key,
      "value": value
    })

  })
  console.log(main_array)
  //your ajax call..do json stringfy..

})

<div>
  <ul id="sortable1" class="connectedSortable">

    <li value="1">A</li>
    <li value="2">B</li>
    <li value="3">C</li>

  </ul>
</div>


<div>
  <HR>
  <form action="" method="POST">

    <ul id="sortable2" class="connectedSortable">
      <li value="4">D</li>
      <!-- list filled by user with drag&drop -->
    </ul>
    <input type="button" name="Submit" value="Click">
    <!-- button for POST request -->
  </form>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>