我正在嘗試創建一個網站以從客戶的相機中捕獲圖片并將其保存在資料庫中。但是，在保存所有內容后，我似乎無法重定向頁面。
視圖.py
def facial_capture(request):
if request.method == 'POST':
file = request.FILES['snap']
if file:
student = Student.objects.get(id=request.session['id'])
if student:
FaceImage.objects.create(student=student, image=file)
return HttpResponse("{'status': 1}", content_type='application/json')
return HttpResponse("{'status': 0}", content_type='application/json')
return render(request, 'id_capture/facial_capture.html')
face_capture.html
{% block body %}
<div class="container">
<form>{% csrf_token %}
<video id="video" width="640" height="480" autoplay></video>
<button id="send">Submit</button>
<canvas id="image_canvas" width="640" height="480"></canvas>
</form>
</div>
{% endblock %}
face_capture.js
$(document).ready(function () {
var video = document.getElementById('video');
var canvas = document.getElementById('image_canvas');
var context = canvas.getContext('2d');
var w = 640, h = 480;
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
video.srcObject = stream;
video.play();
});
}
document.getElementById("send").addEventListener("click", function() {
context.translate(w, 0);
context.scale(-1, 1);
context.drawImage(video, 0, 0, w, h);
canvas.toBlob(upload, "image/jpeg");
});
function upload(file) {
var formData = new FormData();
formData.append("snap", file);
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
$.ajax({
headers: {'X-CSRFToken': csrftoken},
type: 'POST',
url: '/signup/facial_capture',
data: formData,
cache: false,
processData: false,
contentType: false,
enctype: 'multipart/form-data',
success: function(data){
console.log('response received');
if (data.status == 1) {
console.log('status ok');
window.location.href = "login";
} else {
console.log('status failed');
window.location.reload();
}
}
})
}
});
我假設在回傳 HttpResponse 之后，它將在 ajax 成功中到達函式并重定向到登錄頁面，但不知何故，我仍然在附加 csrfmiddlewaretoken 的facial_capture 頁面上。
我的問題是，這是在使用 ajax 成功發送發布請求后重定向頁面的正確方法還是我做錯了什么？
編輯： url.py
urlpatterns = [
path('login', views.login, name='login'),
path('signup/facial_capture', views.facial_capture, name='facial_capture')
] static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
uj5u.com熱心網友回復：
// Your django code should be like this
return HttpResponse(json.dumps({'status': "1"}), content_type="application/json")
在 Django 模板中，您應該按如下方式分配 url。{% url '登錄' %}
function upload(file) {
var formData = new FormData();
formData.append("snap", file);
formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
$.ajax({
type: 'POST',
url: "{% url 'facial_capture' %}",
data: formData,
cache: false,
processData: false,
contentType: false,
enctype: 'multipart/form-data',
success: function(data){
console.log('response received');
if (data.status == 1) {
console.log('status ok');
window.location.href = "{% url 'login' %}";
} else {
console.log('status failed');
window.location.reload();
}
}
})
}
uj5u.com熱心網友回復：
首先，您可以使用包含字典的 JsonResponse 而不是 HttpResponse。其次，window.location.href 采用絕對 url 或以 / 開頭的相對 url
uj5u.com熱心網友回復：
我已經設法弄清楚為什么。我忘了宣告按鈕型別，默認情況下它是一個提交按鈕。我需要做的就是將按鈕更改為：
<button id="send" type="button">Submit</button>
而且，根據大家的建議，我應該將回復更改為：
return JsonResponse({"status": 1})
// or
return HttpResponse(json.dumps({"status": 1}), content_type='application/json')
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/456939.html