我正在尝试编写一个使用javascript“ JQUERY” $ get的工具。以异步方式从多个API获取数据。数据被推送到查询并通过AJAX发送到DJANGO。那行得通,但是..数据应该通过Python在后端进行编辑,然后再发送回前端。 问题:数据显示在检查工具(FIREFOX)的答案中,而不显示在HTML中。
我的HTML:
<form method="POST" action="/my_page/" id="test_form">
{% csrf_token %}
<input type="text" id="name" name="name" placeholder="Type Keywords ...">
<input type="submit" value="GO!"></input>
</form>
<tbody>
{% for task in tasks %}
<tr>
<td>
{{ task }}
</td>
</tr>
{% endfor %}
</tbody>
js:
$(document).on('submit','#test_form', function(e){
e.preventDefault();
var daten = [];
var input = $('#name').val();
var apis = [
API1, API2, API3,...... and so on to API 50
];
var api;
for (api of apis){
$.get(api, function(data){
for (bla of data.suggestions){
daten.push(bla.value)
};
});
};
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, daten);
});
Promise.all([promise3]).then((values) => {
$.ajax({
type: 'POST',
url: '/my_page/',
data: {'daten[]': values},
success:function(data){
console.log(data);
}
});
return false;
});
});
views.py:
@csrf_exempt
def my_page(request):
if request.is_ajax():
tasks = request.POST.getlist('daten[]')
print(tasks) #That works fine
return render(request, 'myApp/my_page.html', {
'tasks':tasks,
})
else:
return render(request, 'myApp/my_page.html')
我一直在研究解决方案好几天了,但我感到绝望。有人可以帮我吗?
所以我假设在console.log(data)
中打印的是HTML响应。
您需要做的是动态替换DOM的内容。 HTML
<div id="my-container-id">
<form method="POST" action="/my_page/" id="test_form">
{% csrf_token %}
<input type="text" id="name" name="name" placeholder="Type Keywords ...">
<input type="submit" value="GO!"></input>
</form>
<tbody>
{% for task in tasks %}
<tr>
<td>
{{ task }}
</td>
</tr>
{% endfor %}
</tbody>
</div>
js
Promise.all([promise3]).then((values) => {
$.ajax({
type: 'POST',
url: '/my_page/',
data: {'daten[]': values},
success:function(data){
console.log(data);
$('#my-container-id').replaceWith(data);
}
});
return false;
});
编辑:更新了我的答案,使其更易于使用和插入