0
私はカタログページを作成しています。このページでは、ユーザーが製品をフィルタリングできるようにしたいと考えています。 したがって、チェックボックスと入力テキストを含むサイドバーを作成しました。 ユーザーがフィルタパラメータを変更するたびにカタログが更新されることをお勧めします。AjaxでDjangoビューを呼び出す
これは私のコードです：あなたが見ることができるように
<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つのフィルタグループました：：サイドバー用
HTML（フィルター）マルカ（ブランド）、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は禁じられ、」エラーを回避する方法には、私が探し始めると、すべてのパラメータとそのI 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。はい、私はただ1つのパラメータを渡す、AJAX呼び出しで。これは動作するかどうかを知ることです。その後、データフィールドに他のパラメータを追加します。
結論として、in request.is_ajax（） 'に入力されない理由を教えてください。 これは正しい方法ではありません。どうやってoringalクエリをフィルタリングできますか？ 私はrequest.method == 'POST'でも試しましたが、同じ結果が得られます。
@csrf_exempt
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 JsonResponse({
'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,
})
をJSで：ここで
があなたのpythonビューに構文エラーがあります（余分な引用符をrequest.is_ajax '後に（）'） 。それは意図的なものか、コピー＆ペーストエラーですか？ – 2ps