Ajax jQuery serialize() & serializeArray() textarea 未以 Django 形式提交

Question

我有一个表单，我试图通过AJAX提交数据&jQuery到Django API。通过Django管理员提交可以正常工作，但是通过表单，textarea字段是导致问题的一个原因。我有一个类似的表单没有文本区，它工作得很好。文本区内容没有被提交，我不知道为什么。下面是表单:

<form id="addMaintenanceRecordsForm" action="">
{% csrf_token %}
<div class="mb-3">
<div class="row">
<div class="col-md-12">
<label>Title <span style="color: #dd0000;">*</span></label>
<input type="text" class="form-control" name="maintenance_title" placeholder="Enter Title" id="mr-title" required>
</div>
</div>
</div>
<div class="mb-3">
<div class="row">
<div class="col-md-12">
<label>Details <span style="color: #dd0000;">*</span></label>
<textarea class="form-control" id="mr-summary" name="summary" placeholder="Describe the nature of maintenance repair..." rows="3" required></textarea>
</div>
</div>
</div>
<div class="mb-3">
<div class="row">
<div class="col-md-12">
<label>Repair Status <span style="color: #dd0000;">*</span></label>
<select class="form-select" name="repair_status" id="mr-status" aria-label="Default select example" placeholder="Repair Status" required>
<option selected disabled>Choose...</option>
<option value="Complete">Complete</option>
<option value="Ongoing">Ongoing</option>
</select>
</div>
</div>
</div>

<button type="submit" class="btn btn-soft-primary btn-sm" id="mr-create">Create New Record</button>
<button type="button" class="btn btn-soft-secondary btn-sm">Cancel</button>
</form>

这是我的jQuery代码

$(function() { 
$('#addMaintenanceRecordsForm').on('submit', function(e) { 
e.preventDefault();
console.log($("#addMaintenanceRecordsForm").serializeArray());
let url = "http://127.0.0.1:8000/api/maintenance/add/";
$.ajax({
type : 'POST',
url : url,
data : $("#addMaintenanceRecordsForm").serializeArray(),
dataType: "json",
success: function(data){
alert("New Maintenance Records Added!");
location.reload();
},
error:function(data){
alert("Maintenance Records Not Added!");
location.reload();
}
});
});
});

我一直得到这个错误:

Bad Request: /api/maintenance/add/
POST http://127.0.0.1:8000/api/maintenance/add/ 400 (Bad Request)

在控制台上我得到这个:

{
"name": "csrfmiddlewaretoken",
"value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
"name": "maintenance_title",
"value": "Pipe Leakages"
}
{
"name": "summary",
"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
"name": "repair_status",
"value": "Ongoing"
}

然后django的CMD返回一个像这样的字典

<QueryDict: {'csrfmiddlewaretoken': ['LmbrIAnh7fJcAjjQ0hnEiwSujdFTJfLgXWpjINGZZz7KngO6qxETVK9YQDCuDIkl'], 'maintenance_title': ['Pipe Leakages'], 'summary': ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'], 'repair_status': ['Ongoing']}>

我已经尝试了其他的解决方案，如:

data : $("#addMaintenanceRecordsForm").serialize(),

或

data : $("#addMaintenanceRecordsForm input, #addMaintenanceRecordsForm textarea").serializeArray(),

或

data : $("#addMaintenanceRecordsForm").find('input', 'select').serializeArray(),

或

$('#mr-create').on('click', function(e) { 
e.preventDefault();

但它们似乎都不起作用。没有序列化的文本区可能有什么问题?

Answer 1

在您的代码中，您显示您正在将表单打印到控制台，如下所示:

console.log($("#addMaintenanceRecordsForm").serializeArray());

你说它会导致这样的输出:

{
"name": "csrfmiddlewaretoken",
"value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
"name": "maintenance_title",
"value": "Pipe Leakages"
}
{
"name": "summary",
"value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
"name": "repair_status",
"value": "Ongoing"
}

如果是使用Django REST的JSON API，你仍然需要一个类似的结构:

{
"csrfmiddlewaretoken": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs",
"maintenance_title": "Pipe Leakages",
"summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
"repair_status": "Ongoing"
}

你收到一个400 Bad Request的原因是因为你发送的JSON在每个字段的顶层都没有键，这意味着Django REST找不到它们。

我建议也许看看serializerArray实际上做了什么，因为它可能不是你想要的。

相反，我建议在JavaScript中使用表单中每个字段的值构建JSON对象，如:

{
"maintenance_title": $("#mr-title").value(),
"repair_status": $("#mr-status").value()
}

或者尝试使用".serialize()"再次查看它打印到控制台的内容。事实上，你得到一个错误的请求，它说所有的字段都丢失了，这意味着它不只是发生在Textarea。

要测试，在Postman中构造你自己的对象，类似于我的对象，看看错误是否消失。