将列表值从 django 模板发送到 django 视图

Question

我编写了一个代码，当用户单击添加按钮时，它会动态添加一个列表。 例如，创建了两个列表-

      <ul>
         <li>samsung galaxy</li>
          <li>xiaomi redmi note 5</li>
      </ul>

添加li的前端代码

<div class="compare_val"> <input type="text" id="txtVal" placeholder="write 
 to add">
      <button onclick="addLi()" class="btn">Add</button></div>
       <ul id="list">
       <li>{{ Brand }}</li>
    </ul>
    <button id="Com_action" class="btn btn-danger ml-3" 
  onclick="ComAction()">Compare</button>

    <script>
       function addLi()
        {

            var txtVal = document.getElementById('txtVal').value,
                listNode = document.getElementById('list'),
                liNode = document.createElement("LI"),
                txtNode = document.createTextNode(txtVal);

                liNode.appendChild(txtNode);
                listNode.appendChild(liNode);
        }
    </script>

现在我想将 li 数据作为列表发送

['samsung galaxy', 'xiaomi redmi note 5'] 到视图

当用户点击比较按钮时。

请帮助我实现这一目标。

Answer 1

您需要修改脚本以包含csrfmiddlewaretoken 并使用XmlHttpRequest 发送数据（我假设您没有使用jquery）：

<script>
    // Standard django function to get csrf_token. More info:
    // https://docs.djangoproject.com/en/2.2/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-and-csrf-cookie-httponly-are-false
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                let cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    const listNode = document.getElementById('list');
    let brands = [];

    function addLi() {
        let txtVal = document.getElementById('txtVal').value,
            liNode = document.createElement("LI"),
            txtNode = document.createTextNode(txtVal);

        liNode.appendChild(txtNode);
        listNode.appendChild(liNode);

        // Save newly added brand to array
        brands.push(txtVal);
    }

    function ComAction() {
        // Prepare AJAX request
        let xhr = new XMLHttpRequest(),
            data = new FormData();

        // Add token
        data.append('csrfmiddlewaretoken', getCookie('csrftoken'));

        // Add all brands
        brands.forEach(function (brand) {
            data.append('brand', brand);
        });

        // We are sending it via POST request to url '/'
        xhr.open('POST', '/', true);
        xhr.onload = function () {
            if (xhr.status === 200) {
                alert('Data received successfully. Brands are ' + xhr.responseText);
            } else if (xhr.status !== 200) {
                alert('Request failed.');
            }
        };
        // Actually send request
        xhr.send(data);
    }
</script>

您的 django 端点可以像这样处理品牌：

views.py：

def index(request):
    if request.method == 'POST':
        brands = request.POST.getlist('brand')
        return HttpResponse(", ".join(brands))
    return render(request, 'index.html')

如果你想让 django 发送数据和重定向用户，修改脚本：

// ...
xhr.open('POST', '/', true);
xhr.onload = function () {
            if (xhr.status === 200) {
                data = JSON.parse(xhr.responseText);
                alert('Data received successfully. Brands are ' + data.brands);
                window.location.replace(data.redirect_url);
            } else if (xhr.status !== 200) {
                alert('Request failed.');
            }
        };
xhr.send(data);

和 Django：

views.py：

def index(request):
    if request.method == 'POST':
        brands = request.POST.getlist('brand')
        response_data = {
            'brands': brands,
            'redirect_url': '/new_url'
        }
        return JsonResponse(response_data)
    return render(request, 'index.html')

Answer 2

先获取列表-

var lis = document.getElementById("selectedli").getElementsByTagName("li");

现在将它们存储到输入 -

<input name="id_selected" type="text" hidden>

现在，你不能直接传递数组，使用jQuery.param(yourObject)。

document.getElementById("id_selected").value = jQuery.param(lis)

param() 方法创建数组或对象的序列化表示，这些表示可以被各种框架（如 php、ruby、django 等）理解。

再次将其转换为 python

from urllib import parse
value = parse.parse_qs(self.request.POST.get('name'))

如果你想使用 ajax，你可以。此代码未经本人测试，如有错误请报告。