Я пытаюсь сделать запрос на получение AJAX на сервер каждый раз, когда пользователь нажимает кнопку. Есть два вида кнопок. Одна кнопка для запуска всех сирен для всех перечисленных камер, и есть кнопка для каждой отдельной камеры.

Моя проблема в том, что я пытаюсь вернуть список словарей из AJAX в представление. JQuery видит объект как строку, так что технически я предполагаю, что он уже находится в формате JSON. Когда я отправляю его в представление, представление видит его как Querydict, и когда я пытаюсь проиндексировать его, он возвращает только единичные символы строки. Когда я пытаюсь вызвать json.loads(cameras) в views.py , views.py сообщение об ошибке:

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)) # =={amp}gt; {amp}lt;class 'str'{amp}gt; print(cameras) # =={amp}gt; [{'name': 'camera1', 'site': 'city'}, {'name': 'camera2', 'site': 'city'}] print(cameras[0]) # =={amp}gt; [ # Manipulate data return JsonResponse({'success': True}, status = 200) # This is just a placeholder for now 

siren_search.html

 {amp}lt;!-- 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 --{amp}gt; {amp}lt;!-- A button to trigger all the listed --{amp}gt; {amp}lt;form id="trigger-all-form" action="{% url 'camera_search:siren_search' %}" method="GET"{amp}gt; {amp}lt;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 }}"{amp}gt; Trigger all sirens at {{ term }} {amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;!-- A button to trigger only one siren --{amp}gt; {amp}lt;form id="{{ camera.asset_name }}-siren-form" action="{% url 'camera_search:siren_search' %}" method="GET"{amp}gt; {amp}lt;button type="submit" name="pulse-siren" id="{{ camera.asset_name }}-siren-btn" name="button-big-submit" class="btn siren-btn" value="{{ camera.asset_name }}"{amp}gt; {{ camera.asset_name }} {amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; 

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) } }); } 

РЕДАКТИРОВАТЬ Согласно комментарию Даниэля, я добавил в 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) 

Вот что сработало для меня. Моя проблема заключалась в том, что строка cameraToTrigger в Javascript содержала одинарные кавычки, и они должны быть в двойных кавычках, чтобы строка была преобразована в 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) } }); }