在多个按钮单击时将 Ajax 请求传递给 Django 视图答案

【问题标题】：Passing Ajax Request to Django View on Multiple Button Click在多个按钮单击时将 Ajax 请求传递给 Django 视图
【发布时间】：2020-07-31 15:55:39
【问题描述】：

我正在尝试通过 Ajax Post 的两个 Click 事件将数据传递给 View，当我只有一个 Button 事件（单击事件）时，一切顺利，但是当我添加第二个单击事件时，我得到了错误

如果需要更多参考，请告诉我。

模板（带有两个按钮和两个下拉菜单）

<select class="selectpicker form-control Plottype">
   <option value="1">Line</option>
   <option value="2">Scatter</option>
   <option value="3">Bar</option>
   <option value="3">Barh</option>
</select>
<div class="btn btn-primary getplot1">Plot1</div>

<select class="valueCountCol selectpicker form-control" name="valueCountCol">
    <option>Col1</option>
    <option>Col2</option>
</select>
<div class="btn btn-primary getplot2">Plot2</div>

Ajax POST（在脚本中）

$(document).ready(function () {

  $(".getplot1").on('click',function () {
    var plottypevalue = $(".Plottype option:selected").text();
    $.ajax({
      url: "/",
      type: "post", // or "get"
      data: {'plot1':plottypevalue},
      headers: { "X-CSRFToken": "{{ csrf_token }}" }, // for csrf token
      success: function (data1) {        
        console.log(data1);
      },
    });
  });

  $(".getplot2").on('click',function () {
    var valueCountCol = $(".valueCountCol option:selected").text();
    $.ajax({
      url: "/",
      type: "post", // or "get"
      data: {'plot2':valueCountCol},
      headers: { "X-CSRFToken": "{{ csrf_token }}" }, // for csrf token
      success: function (data1) {
        console.log(data1);
      },
    });
  });
});

Views.py

if request.POST['plot1']:
  plottypevalue = request.body.unicode('utf-8')
  data1 = plottypevalue
  return HttpResponse(json.dumps(data1), content_type="application/json")

if request.POST['plot2']:
  valcountcol = request.body.unicode('utf-8')
  data1 = valcountcol
  return HttpResponse(json.dumps(data1), content_type="application/json")

错误

Internal Server Error: /
Traceback (most recent call last):
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\venv\lib\site-packages\django\utils\datastructures.py", line 76, in __getitem__
    list_ = super().__getitem__(key)
KeyError: 'plot1'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\venv\lib\site-packages\django\core\handlers\exception.py", line 34, in inner
    response = get_response(request)
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\venv\lib\site-packages\django\core\handlers\base.py", line 115, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\venv\lib\site-packages\django\core\handlers\base.py", line 113, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\MLAP\MLApp\views.py", line 53, in homepage
    if request.POST['plot1']:
  File "C:\Users\yigadi\PycharmProjects\MLAutoProject\venv\lib\site-packages\django\utils\datastructures.py", line 78, in __getitem__
    raise MultiValueDictKeyError(key)
django.utils.datastructures.MultiValueDictKeyError: 'plot1'

【问题讨论】：

您能否打印出request.POST['plot1'] 和request.POST['plot2'] 的值，以检查它们是否收到了值以及是否收到了正确的值。
你可以试试这个request.POST.get('plot1', False)。
谢谢@jaimish11，我会尝试在这里发布结果
成功了。我所要做的就是将request.POST['plot'] 更改为request.POST.get('plot1', False)
正如@jaimish11 建议的那样，检查request.POST['plot1'] 的值，因为它是“无”，而request.POST.get('plot1',False) 正在提供在AJAX Post 中传递的数据。

标签： python jquery django ajax

【解决方案1】：

这就是request.POST.get() 起作用的原因：

一开始只使用request.POST['plot1'] 是很自然的。但是，在这种情况下发生的情况是，如果 plot1 不存在，它将引发 KeyError 这就是您的情况。

解决方案是使用request.POST.get('plot1', False)，此方法允许您指定在'plot1 不存在时使用的默认参数。 False 是本例中的默认参数。

【讨论】：