我面臨的問題與基于由 jQuery 發起的 AJAX 發布請求更新的背景關系重新渲染 Django 視圖有關。我之所以需要 AJAX 請求，是因為我需要在不重繪 頁面的情況下修改頁面 UI，這對我要構建的內容至關重要。
到目前為止，我能夠觸發 AJAX 發布請求到應該發生更新的同一頁面的 URL，并且 Djangoview.py充分注冊它已被呼叫。但是，雖然我可以重現更新 Django 視圖背景關系的能力，但該視圖似乎并沒有根據更新的背景關系重新呈現更新的 HTML。
How to re-render django template code on AJAX call 中的執行緒似乎準確地描述了我的問題。該執行緒投票最多的解決方案是有一個條件，該條件僅在僅呈現部分模板（而不是完整 HTML 頁面）的 AJAX 呼叫的情況下觸發 - 與要更新的組件相對應的部分模板。這是在下面的代碼片段中重現的內容，但 HTML 不會根據更新的背景關系而更改。
附件是一個簡單的嘗試的相關代碼片段，頁面<h1>2<h1/>默認顯示，當我們單擊視窗上的任意位置時，它意味著更新為 5。單擊視窗上的任意位置會觸發 AJAX 呼叫，但頁面不會更新為<h1>5<h1/>.
視圖.py
def index(request):
context = {"num": 2}
if (request.method == "POST"):
print("View hit due to AJAX call!") # // THIS CAN BE TRIGGERED ADEQUATELY!
context["num"] = 5
return render(request, 'num.html', context)
return render(request, 'override.html', context)
覆寫.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{% static 'js/num.js' %}" defer></script>
<title>Title</title>
</head>
<body class="">
<div class="">
{% include 'num.html' %}
</div>
</body>
</html>
數字.html
<h1>{{ num }}</h1>
數字.js
var postUrl = "http://localhost:8000/";
function getCSRFToken() {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i ) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, 10) == ('csrftoken' '=')) {
cookieValue = decodeURIComponent(cookie.substring(10));
break;
}
}
}
return cookieValue;
}
$('html').click(function(){
values = [1, 2];
var jsonText = JSON.stringify(values);
$.ajax({
url: postUrl,
headers: { "X-CSRFToken": getCSRFToken(), "X-Requested-With": "XMLHttpRequest" },
type: 'POST',
data: jsonText, // note the data, jsonText, does not really matter. The Django context gets updated to 5 instead of 2.
traditional: true,
dataType: 'html',
success: function(result){
console.log("AJAX successful") // THIS CAN BE TRIGGERED ADEQUATELY!
}
});
});
uj5u.com熱心網友回復：
如果這部分代碼
success: function(result){
console.log(result)
}
列印 num.html 的內容，您可以更改 num.html 以獲取 h1 id
數字.hml
<h1 id="numberToChange">{{ num }}</h1>
在你的 num.js
$('html').click(function(){
values = [1, 2];
var jsonText = JSON.stringify(values);
$.ajax({
url: postUrl,
headers: { "X-CSRFToken": getCSRFToken(), "X-Requested-With": "XMLHttpRequest" },
type: 'POST',
data: jsonText, // note the data, jsonText, does not really matter. The Django context gets updated to 5 instead of 2.
traditional: true,
dataType: 'html',
success: function(result){
document.getElementById("numberToChange").innerHTML = result}
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/417358.html
標籤：
上一篇：我可以以編程方式添加大量過濾器嗎