Django-Ajax前后端传参问题

Django-Ajax前后端传参问题

问题描述

用Django做了一个Web项目，页面如图

希望通过点击图中单选改变堆积图中展示的数据，前端在html文件中直接写的js代码，用了ajax传递数据

html部分代码如下：

<div id="Surface" style="width: 800px;height:600px;"></div>

   window.onload = function () {
        $.ajax({
            url: "/test/",
            type: "POST",
            data: {"k1": "v1"},
            success: function (data) {
                Surface(data['sur']);
            }
        })
    }

view.py部分代码如下：

@csrf_exempt
def test(request):
    if request.method == "POST":
        scenario_A='1'
        scenario_B='1'
        sur = [output_data(scenario_A, scenario_B),
               ['industry', 'Lighting_Appliances', 'transport'],
               ['2007', '2010', '2015', '2020', '2025', '2030', '2035', '2040', '2045', '2050']]
        return JsonResponse({'sur': sur})
    else:
        return render(request, 'test.html',)

urls.py部分代码如下：

    url(r'^test/$', views.test),

尝试失败经验

为增加图下选项表单，首先在html下增加radio单选，同时用checked设置默认选项

<form method="post" name="choice">
    Scenario A：
    <input type="radio" value="1" name="Scenario_A" id="a1" checked="checked">1
    <input type="radio" value="2" name="Scenario_A" id="a2">2
    <input type="radio" value="3" name="Scenario_A" id="a3">3
    <input type="radio" value="4" name="Scenario_A" id="a4">4</br>
    Scenario B：
    <input type="radio" value="1" name="Scenario_B" id="b1" checked="checked">1
    <input type="radio" value="2" name="Scenario_B" id="b2">2
    <input type="radio" value="3" name="Scenario_B" id="b3">3
    <input type="radio" value="4" name="Scenario_B" id="b4">4</br>
</form>

然后试图直接在view.py中接收radio的信号

@csrf_exempt
def test(request):
    if request.method == "POST":
        scenario_A=request.POST.get('Scenario_A')  #增加了此行代码
        scenario_B=request.POST.get('Scenario_B')  #增加了此行代码
        if scenario_A==None or scenario_B==None:   #增加了此行代码
            scenario_A='1'
            scenario_B='1'
        sur = [output_data(scenario_A, scenario_B),
               ['industry', 'Lighting_Appliances', 'transport'],
               ['2007', '2010', '2015', '2020', '2025', '2030', '2035', '2040', '2045', '2050']]
        return JsonResponse({'sur': sur})
    else:
        return render(request, 'test.html',)

但是后端接收不到radio选项传递的参数，即在前端网页点击相应按钮没有反应，在后端print测试也显示scenario_A和scenario_B的值也都为None，显然前端参数没有成功传递到后端

解决方法

前端增加对radio的监听，代码如下：

window.onload = function () {
        $.ajax({
            url: "/test/",
            type: "POST",
            data: {"k1": "v1"},
            success: function (data) {
                Surface(data['sur']);
            }
        })
    }
//以下为新增代码
$(document).ready(function () {
    var a_value = 1
    var b_value = 1
    $('input[type=radio][name=Scenario_A]').change(function () {
        // alert(this.value)
        a_value = this.value
        $.ajax({
            url: "/test/read_data/",
            type: "POST",
            data: {"a": a_value,"b":b_value},//将a、b传递给后端
            success: function (data) {
                Surface(data['sur']);
            }
        })
    });
    $('input[type=radio][name=Scenario_B]').change(function () {
        // alert(this.value)
        b_value = this.value
        $.ajax({
            url: "/test/read_data/",
            type: "POST",
            data: {"a": a_value,"b":b_value}, //将a、b传递给后端
            success: function (data) {
                Surface(data['sur']);
            }
        })
    });

});

view.py增加函数，当点击选项时调用新的函数：

@csrf_exempt
def test(request):
    if request.method == "POST":
        scenario_A='1'
        scenario_B='1'
        sur = [output_data(scenario_A, scenario_B),
               ['industry', 'Lighting_Appliances', 'transport'],
               ['2007', '2010', '2015', '2020', '2025', '2030', '2035', '2040', '2045', '2050']]
        return JsonResponse({'sur': sur})
    else:
        return render(request, 'test.html',)

#以下为新增函数
@csrf_exempt
def read_data(request):
    if request.method == "POST":
        data = request.POST
        a = data.get('a')
        b = data.get('b')
        sur = [output_data(str(a), str(b)),
               ['industry', 'Lighting_Appliances', 'transport'],
               ['2007', '2010', '2015', '2020', '2025', '2030', '2035', '2040', '2045', '2050']]
        return JsonResponse({'sur': sur})
    else:
        return render(request, 'test.html',)

urls.py新增代码如下：

url(r'^test/read_data/$', views.read_data),

OK！

注意点

• ajax中url: "/test/read_data/",与urls.py文件中的url相对应
• ajax中data: {"a": a_value,"b":b_value}可对后端进行传参

参考链接：Django->Ajax 传输参数和接受参数方式_ghostdog2046的专栏-CSDN博客

Fin