Django 2.1.7 ajax數組傳遞和後台接收
- 2019 年 10 月 5 日
- 筆記
存在問題
在前端有時候需要傳遞一個二維數組到後端，但是傳遞的情況可能會是這樣，如下圖：
此時，如果在django後端使用request.POST.get('users_rate')來獲取值，獲取到的結果會是None，無法獲取到結果。
在查詢資料的過程中，有人在ajax請求中增加traditional:true,//防止深度序列化，修改請求內容如下：
// 設置任務信息 var task_info = { 'tag': 'submit', // 提交表單標識 'task_name': $('#task_name').val(), 'task_priority': $('#task_priority').val(), 'service_url': $('#service_url').val(), 'run_time': $('#run_time').val(), 'expect_slaves': $('#expect_slaves').val(), 'users_rate':users_rate, }; // 發送ajax提交表單信息，創建任務 $.ajax({ url: "/tasks_manager/create_task", type: 'POST', headers: {"X-CSRFToken": Cookies.get('csrftoken')}, // 從Cookie取csrf_token，並設置ajax請求頭 data:task_info, dataType: "json", traditional:true,//防止深度序列化 async: false, // 請求成功調用的函數 success: function(res){ console.log(res); }, // 請求出錯時調用的函數 error:function(){ alert("提交創建任務失敗"); } });
可是這樣並不能解決問題，在django後端的確可以接手到了結果，但是獲取的值將會是[object Object]。 網絡請求的Form Data截圖如下：
解決問題
前端將要傳入的數組進行json格式化
使用JSON.stringify(users_rate)對數組進行json序列化。 修改傳送數據的格式如下：
此時，再次進行ajax請求，查看網絡請求中的Form Data，如下：
在後台通過request.POST.get('users_rate')，獲取到一個列表字符串，如下：
# todo: 獲取提交創建任務的form表單信息，創建任務 if tag == 'submit': print("submit") # todo:獲取任務的基本信息 users_rate = request.POST.get('users_rate') print('users_rate = ', users_rate)
前端完整ajax請求示例
// 獲取並發用戶數據 users_rate = []; // 並發用戶數據 $('.users-rate-list .data-table tbody').find('tr').each(function () { users_rate.push({ 'users': $(this).find('.users h5 span').text(), 'rate': $(this).find('.rate h5 span').text(), }); }); // 設置任務信息 var task_info = { 'tag': 'submit', // 提交表單標識 'task_name': $('#task_name').val(), 'task_priority': $('#task_priority').val(), 'service_url': $('#service_url').val(), 'run_time': $('#run_time').val(), 'expect_slaves': $('#expect_slaves').val(), 'users_rate':JSON.stringify(users_rate), }; // 發送ajax提交表單信息，創建任務 $.ajax({ url: "/tasks_manager/create_task", type: 'POST', headers: {"X-CSRFToken": Cookies.get('csrftoken')}, // 從Cookie取csrf_token，並設置ajax請求頭 data:task_info, dataType: "json", async: false, // 請求成功調用的函數 success: function(res){ console.log(res); }, // 請求出錯時調用的函數 error:function(){ alert("提交創建任務失敗"); } });
