我正面临着一个问题与获取后在这前端javascript和这django后端
我使用javascript中的fetch方法将JSON形式的数据发送到后端，然后处理数据，然后将处理后的数据传递到django中的returened render，用于另一个页面。
但问题是我使用的fetch不允许django进行渲染，它只是停留在同一个页面。
下面是我在前端使用的代码：
<script>
const form = document.getElementById('fooorm');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const formData = new FormData(form);
const query = formData.get('query');
const csrfToken = form.querySelector('input[name="csrfmiddlewaretoken"]').value;
const position = await gps();
const data = {
query: query,
latitude: position.coords.latitude,
longitude: position.coords.longitude
};
fetch('/results/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
},
body: JSON.stringify(data)
});
});
function gps() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
}
</scirpt>下面是我在后端使用的代码：
def index(request):
if request.method == 'POST':
data = json.loads(request.body)
query = data['query']
latitude = data['latitude']
longitude = data['longitude']
services = bricoler.objects.filter(service__icontains=query)
return render(request, "results.html", {"nearby": services})
else:
return render(request, 'index.html')仅用于测试，results.html文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>results</title>
</head>
<body>
{% for service in nearby %}
<h2>-----------------------</h2>
<span>name : {{service.name}}</span><p>
<span>service : {{service.service}}</span><p>
<span>phone : {{service.phone}}</span><p>
<span>local : {{service.local}}</span><p>
{% endfor %}
</body>
</html>
1条答案
按热度按时间oxcyiej71#
您可以执行以下步骤：
1.如果你使用fetch来发布表单，请确保你已经为那些url“/results/”创建了API。你可以使用django rest framework或者fastapi或者其他，否则你可以正常提交表单，而不需要fetch。如果你仍然想使用fetch，请遵循下一步，
1.使用
then定义下一步（如果你想在发布成功后移动其他页面，可以在这里定义）1.使用catch查看错误时，查看错误消息非常重要。
示例获取的完整版本，