使用Ajax将数据发送到Django模型

Question

我创建了以下Ajax请求，将数据发送到我的views.py。一旦发送了请求，视图就应该将thata保存在我的数据库中。我实际代码的问题是，我在表单中提交的值没有被保存。

以下是我尝试过的：Html/JS

<script>
$(document).ready(function () {
$("#test").submit(function (event) {
$.ajax({
type: "POST",
url: "/ajtest/",
data: { csrfmiddlewaretoken: "{{ csrf_token }}",
state:"inactive",
data: $('#test').serialize(),
},
success: function () {
$('#message').html("<h2>Submitted.</h2>")
}
});
return false; 
});
});
</script>
<form method='post' id='test'>
{% csrf_token %}
<input type="text">
<input type='submit' value='Test button'/>
<div id='message'>Initial text</div>
</form>

这是视图：

def ajtest(request):
if request.method == 'POST':
model = MyModel()
model.value = request.POST['data']
model.user = request.user
model.save()
messages.success(request, f"Success!!")
else:
messages.success(request, f"Error")
return HttpResponse('ok')

此处，正在保存user。当我点击Ajax表单时，我看到DB中出现了一条新记录，问题是，在列value中，我没有看到表单中提交的数据，而是看到了一个空白字段，或者现在是请求的CSRF令牌。有人能帮我找出问题吗？我确信它在Ajax请求中。

Answer 1

请尝试下面的代码片段。

<script>
function getCookie(cname) {
var name = cname + "=",
decodedCookie = decodeURIComponent(document.cookie),
ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

// Generic Function to process Ajax Calls
function callAJAX(url, header, parameters, req_type, successCallback, 
beforeSendCallback, completeCallback ) {
jQuery.ajax({
type : req_type,
url : url,
headers : header ,
data :  parameters,
beforeSend : beforeSendCallback,
complete : completeCallback,
success : successCallback,
error : function(xhr, textStatus, errorThrown) {
console.log( 'error' + textStatus + ' ' + xhr + ' ' + errorThrown );
},
async: false
});
}

$(document).ready(function () {
$("#test").submit(function (event) {
callAJAX( "/ajtest",
{"X-CSRFToken": getCookie("csrftoken") },
parameters={'data': $('#text_box').val()},
'post',
function(data){
$('#message').html("<h2>Submitted.</h2>");
}, null, null );
return false; 
});

});
</script>
<form method='post' id='test'>
{% csrf_token %}
<input type="text" id='text_box' name='input_val'>
<input type='submit' value='Test button'/>
<div id='message'>Initial text</div>
</form>

Answer 2

您需要将name属性添加到<input type="text">

来自jquery文档：

对于要包含在序列化字符串中的表单元素的值，元素必须具有name属性。

将名称属性添加为，

<form method='post' id='test'>
{% csrf_token %}
<input type="text" name="value">
<input type='submit' value='Test button'/>
<div id='message'>Initial text</div>
</form>

这是示范小提琴https://jsfiddle.net/nawarkhede/ajfvs58c/2/。我可以看到数据正在传递。