Django - 如何正确地将列表从模板发送到 AJAX 以查看？

Posted 2023-05-08

【中文标题】Django - 如何正确地将列表从模板发送到 AJAX 以查看？

【英文标题】：Django - How do I properly send a list from template to AJAX to view?

【发布时间】：2019-11-10 13:06:56

【问题描述】：

每当用户单击按钮时，我都会尝试向服务器发出 AJAX 获取请求。有两种按钮。一个按钮可触发所有列出的摄像机的所有警报器，每个单独的摄像机都有一个按钮。

我的问题是我试图将字典列表从 AJAX 返回到视图。 JQuery 将对象视为字符串，所以从技术上讲，我猜它已经是 JSON 格式了。当我将它发送到视图时，视图将其视为 Querydict，当我尝试对其进行索引时，它只返回字符串的单数字符。当我尝试在views.py 中调用json.loads(cameras) 时，它会抛出一个错误：

json.decoder.JSONDecodeError：期望用双引号括起来的属性名称：第 1 行第 3 列（字符 2）```

我知道这可能与我在前端处理变量的方式有关，但我不确定如何解决此问题。我最初应该以不同的方式将变量从视图传递到模板吗？我是否将变量从模板错误地传递给 JQuery？我是否错误地处理了 JQuery 中的变量？还是我只是在视图中做错了什么？

这是用户看到的内容

---

views.py

def trigger_sirens(request):
    # Retrieve the list of dictionaries
    cameras = request.GET.get('cameras')
    print(type(cameras)) # ==> <class 'str'>
    print(cameras)       # ==> ['name': 'camera1', 'site': 'city', 'name': 'camera2', 'site': 'city']
    print(cameras[0])    # ==> [

    # Manipulate data

    return JsonResponse('success': True, status = 200) # This is just a placeholder for now

siren_search.html

<!-- These buttons are wrapped in forms because this is how I built it first
without using javascript, but now I'm trying to implement javascript functionality -->

<!-- A button to trigger all the listed -->
<form id="trigger-all-form" action="% url 'camera_search:siren_search' %" method="GET">
    <button id="trigger-all-btn" name="pulse-all-sirens" type="submit"
        class="btn siren-btn btn-lg btn-block js-trigger-all-sirens-btn"
        value=" cameras ">
        Trigger all sirens at  term 
    </button>
</form>

<!-- A button to trigger only one siren -->
<form id=" camera.asset_name -siren-form"
    action="% url 'camera_search:siren_search' %" method="GET">
    <button type="submit" name="pulse-siren" id=" camera.asset_name -siren-btn"
        name="button-big-submit" class="btn siren-btn" value=" camera.asset_name ">
         camera.asset_name 
    </button>
</form>

custom.js

function buttonAjaxCall(buttonObject) 
  var camerasToTrigger = buttonObject.attr('value');

  console.log(jQuery.type(camerasToTrigger))                 // string
  console.log(camerasToTrigger)                              // ['name': 'camera1', 'site': 'city', 'name': 'camera2', 'site': 'city']
  console.log(jQuery.type(JSON.stringify(camerasToTrigger))) // string
  console.log(JSON.stringify(camerasToTrigger))              // "['name': 'camera1', 'site': 'city', 'name': 'camera2', 'site': 'city']"

  if (buttonObject.hasClass('js-trigger-all-sirens-btn')) 
    // Convert data this way, still not sure how
  
  else 
    // Convert data for one button, still not sure how
  

  $.ajax(
    url: 'siren/',
    type: 'GET',
    data: 
      'cameras': camerasToTrigger,
    ,
    dataType: 'json',
    success: function (response) 
      console.log('Success: ', response)
    ,
    error: function (response) 
      console.log('Error: ', response)
    
  );

---

编辑 根据 Daniel 的评论，我在 views.py 中添加了将数据传递给模板的代码。

# deployed is a list of dictionaries
context = 
    'cameras': sorted(deployed, key=lambda camera: (camera['site_id'] == 'N/A', camera['site_id'])),
    'term': term


return render(request, 'siren_search.html', context)

【问题讨论】：

这不是问题所在。问题是您如何首先将数据获取到模板中。显然，它不是 JSON。

@DanielRoseman 这不是 JSON，我将上下文字典传递给模板。我会更新我的帖子。起初我没有 AJAX 功能，我使用 django 在按钮上提交表单来处理所有内容，但现在我想使用 AJAX 来执行此操作，所以这是否需要我更改以前的逻辑？这是我的问题的一部分。

【参考方案1】：

这对我有用。我的问题是javascript中的camerasToTrigger字符串有单引号'，这些需要双引号"才能将字符串转换为JSON。

# views.py

def trigger_sirens(request):

    # Retrieve the list of dictionaries in JSON format
    cameras = request.POST.get('cameras', None)

    # Read in the JSON object if it exists
    if cameras_json is not None:
        cameras = json.loads(cameras_json)
    else:
        return JsonResponse('success': False, status = 400)

    return JsonResponse('success': True, status = 200)

// custom.js

function buttonAjaxCall(buttonObject) 
  var camerasToTrigger = buttonObject.attr('value');
  var data = 
    // Make sure the list is JSON
    'cameras': camerasToTrigger.replace(/'/g, '"');
  

  $.ajax(
    url: 'siren/',
    type: 'GET',
    data: data,
    dataType: 'json',
    success: function (response) 
      console.log('Success: ', response)
    ,
    error: function (response) 
      console.log('Error: ', response)
    
  );