我正在創建一個目錄頁面。在此頁面上,我想讓用戶過濾產品。 所以我創建了一個帶複選框和輸入文本的邊欄。 我希望每次用戶更改過濾器參數時,目錄都會更新。Django查看Ajax調用
這是我的代碼:
HTML的側邊欄(過濾器):
<h3>Filtri:</h3>
<b>Marca:</b><br>
{% for marca in marche %}
<input type="checkbox" title="{{ marca.nome }}" value="{{ marca.nome }}" name="marca" class="marca" onclick="filtra()"> {{ marca.nome }} <br>
{% empty %}
<p>Nessuna Marca è ancora stata inserita.</p>
{% endfor %}
<br>
<b>Portata:</b> <br>
Maggiore di
<input type="text" title="portata" name="portata" id="portata" class="textbox-filtro" maxlength="4" onblur="filtra()"> kg
<br><br>
<b>Sollevamento:</b> <br>
Maggiore di
<input type="text" title="sollevamento" id="sollevamento" class="textbox-filtro" maxlength="4" onblur="filtra()"> mt
<br><br>
<b>Trazione:</b><br>
{% for tra in trazione %}
<input type="checkbox" title="{{ tra.trazione }}" value="{{ tra.trazione }}" id="{{ tra.trazione }}" class="trazione" onclick="filtra()"> {{ tra.trazione }} <br>
{% empty %}
<p>Nessuna Trazione è ancora stata inserita</p>
{% endfor %}
<br>
<b>Idroguida:</b><br>
{% for idro in idroguida %}
<input type="checkbox" title="{{ idro.idroguida }}" value="{{ idro.idroguida }}" id="{{ idro.idroguida }}" class="idroguida" onclick="filtra()"> {{ idro.idroguida }} <br>
{% empty %}
<p>Nessuna Idroguida è ancora stata inderita</p>
{% endfor %}
正如你所看到的,我已經5個濾嘴組:馬卡(品牌),Portata(承載能力), Sollevamento(電梯),Trazione(牽引)和Idroguida(動力轉向)。
每當您編輯這些值時,JavaScript函數filtra()都會被調用...所以onblur用於文本輸入,onclick用於複選框。
下面的JavaScript代碼:
<script>
function getCookie(name) {
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]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function filtra() {
var marche_selezionate = [];
var marca_check = document.getElementsByClassName('marca');
for(var i = 0; i < marca_check.length; i++){
if(marca_check[i].checked){
marche_selezionate.push(marca_check[i].value);
}
}
marche_selezionate = marche_selezionate.join(',');
var portata_selezionata = document.getElementById('portata').value;
var sollevamento_selezionata = document.getElementById('sollevamento').value;
var trazioni_selezionate = [];
var trazione_check = document.getElementsByClassName('trazione');
for(i = 0; i < trazione_check.length; i++){
if(trazione_check[i].checked){
trazioni_selezionate.push(trazione_check[i].value);
}
}
var idroguida_selezionate = [];
var idroguida_check = document.getElementsByClassName('idroguida');
for(i = 0; i < idroguida_check.length; i++){
if(idroguida_check[i].checked){
idroguida_selezionate.push(idroguida_check[i].value);
}
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
var postUrl = "{% url 'carrellielevatori:carrellielevatori' %}";
$.ajax({
url: postUrl,
type: 'POST',
data: {'marche_selezionate': marche_selezionate},
success: function(result){
alert('success');
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
}
</script>
因此,建立CSRF令牌,在方式,以避免在錯誤發生後「403禁止入內」,我開始尋找,所有的參數和設置了5個變量,我想要通過視圖來篩選目錄。
我也在ajax調用中添加了一些警報,以瞭解它是否成功。它是。出現「成功」提示。
問題是,一切都停在這裏。實際上,在視圖中似乎沒有任何反應。
這裏的視圖的代碼:
def carrellielevatori(request):
lista_carrelli = Carrelli.objects.all()
lista_marche = Marche.objects.all()
lista_trazione = Trazione.objects.all()
lista_idroguida = Idroguida.objects.all()
footerForm = MailForm()
method = 'get'
if request.is_ajax():
method = 'ajax'
return render(request,
'carrellielevatori/carrellielevatori.html',
{
'title': 'Carrelli Elevatori - Giemme Lift s.r.l.',
'footerForm': footerForm,
'year': datetime.now().year,
'carrelli': lista_carrelli,
'marche': lista_marche,
'trazione': lista_trazione,
'idroguida': lista_idroguida,
'method':method,
})
,瞭解它是否正常工作,我已經設置了變量方法「獲取」並顯示在頁面上。然後在ajax「if」中,我將該值更改爲「ajax」。 所以它應該改變,對吧?該文本保持「獲得」並且從不變爲「ajax」。
這是第一次嘗試查看它是否有效。一旦我知道這項工作,我將着手過濾使用產品的查詢。但如果這不起作用,那就沒用了。
PS。是的,在ajax調用中,我只傳遞一個參數。這是要知道它是否有效。稍後我將繼續在數據字段中添加其他參數。
總結一下,你能告訴我爲什麼不輸入in if request.is_ajax()': 這是不是正確的方式,我該如何過濾oringal查詢? 我也試過如果request.method =='POST',但我得到了相同的結果。
有一個在你的Python視圖中的語法錯誤(request.is_ajax後'一個額外的引號()') 。是故意的還是複製粘貼錯誤? – 2ps