javascript - 使用 ajax Javascript 提交 Django 表单

Question

我试图从输入数据网格表中发布表单。当我打印filter_list（参考代码）时，我只得到一个无对象。但是当我通过成功使用警报功能检查表中的数据时，它返回正确的选定值。我对ajax不太了解。请帮我整理一下。我 在下面的 Views.py 中附加了views.py、HTML 的代码，

def mytable1(request):
    if request.method == 'POST':
        filter_list = request.POST.get('regionwiselist')
        **print(filter_list)**
        context={'filter_list':filter_list}
        print(context)
        return render(request, 'mytable2.html', context)
    else:
        sbc = MTD.pdobjects.all()
        df = sbc.to_dataframe().reset_index(drop=True)
        df.reset_index(inplace=True)
        dict1=df.transpose().to_dict()
        dict=[]
        for k,v in dict1.items():
            dict.append(v)
        col=list(df1.columns)
        context={
                'Vertical_value':dict,
                'Vertical_header':col
        }
        return render(request, 'mytable2.html', context)

在 mytable2.html 中，

{% extends "base.html" %}
{% block body %}
{% if Vertical_header  %}
<script>
  $(document).ready(function(){
    $("#gridContainer").dxDataGrid({
        dataSource: {{Vertical_value|safe}},
        showBorders: true,
        paging: {
            pageSize: 10
        },
        keyExpr: "RGN",
        showBorders: true,
        selection: {
            mode: "multiple"
        },
        paging: {
            pageSize: 10
        },
        filterRow: {
            visible: true
        },
        pager: {
            showPageSizeSelector: true,
            allowedPageSizes: [5, 10, 20],
            showInfo: true
        },
        columns: {{Vertical_header|safe}},
        showBorders: true
    });
  });
</script>
<div class="demo-container">
  <form id='my_form' method = "POST">
    {% csrf_token %}
      <div id="gridContainer"></div>
      <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-angle-double-down"></i></button>
  </form>
</div>
<script type="text/javascript">
  $(document).on('submit','#my_form',function data(e){
    var dataGrid = $("#gridContainer").dxDataGrid("instance");
    var selectedKeys = dataGrid.getSelectedRowKeys();
    $.ajax({
        type: 'POST',
        url: '{% url 'mytable1' %}',
        data:{
          regionwiselist:selectedKeys[0].value,
          csrfmiddlewaretoken:$("[name=csrfmiddlewaretoken]").val()
        },
        success: function(){
            alert(selectedKeys);
          }
       });
});
</script>
<script type="text/javascript">
  function data(){
    var dataGrid = $("#gridContainer").dxDataGrid("instance");
    var selectedKeys = dataGrid.getSelectedRowKeys();
    console.log(selectedKeys[0])
  };
</script>
<button onclick="data()" type="button" name="button"></button>
{% else %}
<h2>kd:{{filter_list|safe}}</h2>

{% endif %}

{% endblock %}

标签： javascriptajaxdjangodjango-formsajaxform