无法将数组列表从JavaScript发送到Django视图

Question

我有一个名为tableData的数组。但是每当我执行它时，我都无法在python终端上得到结果。既然我已经把print(pieFact)放进去了，它应该把输出打印出来，对吗？除此之外，当我放置var data = {'test': '2', csrfmiddlewaretoken: '{{ csrf_token }}'};时，我实际上可以在终端中获得2输出，但当我放置'test': tableData时，不能获得数组。有人能告诉我我做错了什么吗？谢谢

网址

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index,name='home-page'),
    path('send/', views.send, name='test'),

]

Javascript

<script>
//declare the array as a global
var tableData = [];
var URL="{% url 'test' %}"

$(document).ready(function () {
  $(".button").on("click", function () {
    para = document.getElementById("Parameter").value;
    condi = document.getElementById("Condition").value;
    value2match = document.getElementById("valuetomatch").value;

    if (para && condi && value2match !== null) {
      var table = document.getElementById("myTable");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);

      cell1.innerHTML = document.getElementById("Parameter").value;
      cell2.innerHTML = document.getElementById("Condition").value;
      cell3.innerHTML = document.getElementById("valuetomatch").value;
      cell4.innerHTML =
        '<button  class = "del_img "onClick="delSpec(this)"><img src="deleteimg.png" width="30" height="30"></button> </div>';

      var myTab = document.getElementById("myTable");

      // Only add the new row:
      tableData.push([
        document.getElementById("Parameter").value,
        document.getElementById("Condition").value,
        document.getElementById("valuetomatch").value
      ]);

      modal.style.display = "none";
    } else {
      alert("All the input box cannot be empty!");
    }
  });

document.getElementById("buttonSubmit").onclick = function () {
        alert(tableData);
        var data = {'test': '2', csrfmiddlewaretoken: '{{ csrf_token }}'};
        $.post(URL, data);

      };
});
</script>

View.py

def send(request):
    arr = request.POST.get('test')
    print(type(arr))
    print(arr)
    return render(request, 'DemoApp/hi.html')

它总是返回None

Answer 1

向请求传递javascript数组对象时可能会出现问题

在将其传递给post请求之前，可能会尝试将其转换为json：

var tableDataJson = JSON.stringify(tableData);

Answer 2

因此，我发现在发送之前，我需要先将数组tableData更改为json。 我用JSON.stringify(tableData)解决了这个问题

JavaScript:

document.getElementById("buttonSubmit").onclick = function () {
        alert(tableData);

        var data = {'data[]': JSON.stringify(tableData), csrfmiddlewaretoken: '{{ csrf_token }}'};
        $.post(URL, data);



      };
});

View.py

def send(request):
    
    arr = request.POST.getlist('data[]', None)
    print(type(arr))
    print(arr)
    return render(request, 'DemoApp/hi.html')