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

时间:2019-05-11 11:55:12

标签: django django-rest-framework django-views

我编写了一个代码,当用户单击“添加”按钮时可以动态添加列表。  例如创建两个列表-

      <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']到视图

当用户单击比较按钮时。

请帮助我实现这一目标。

image of html page

2 个答案:

答案 0 :(得分:2)

您将需要修改脚本以包含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')

答案 1 :(得分:0)

首先获取列表-

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,可以。此代码未经我测试,因此请报告是否发生任何错误。