Javascriptからデータを受け取った後に新しいページにリダイレクト

Question

Javascript配列をDjangoビューに渡そうとしています。これは動作しますが、そのデータを操作して別のURLに表示したいと思います。だから私はあなたがアイテムを選択する製品ページを持っています。フォームが送信されると、このJavaScriptはと呼ばれ、私はそれは、カートのページにリダイレクトしたいされていますのHttpResponseコメントアウト行で

$("#getArr").submit(function(){ 
    var data = {'ab[]' : chosen}; 
    $.post('cart/', data, function(response){ 
    if(response == 'success'){ 
     window.location.href="cart/" // references my views 
    } 
    else{ 
     alert('Error! :('); 
    } 
    }); 
}); 

views.py

def cart(request): 
    if request.method == 'POST': 
    chosen = request.POST.getlist('ab[]') 
    print(chosen, file=sys.stderr) 
    template = loader.get_template('o/cart.html') 
    context = {'prodChosen': chosen, 
       'e': "hy"} 
    return HttpResponse('success') 
    # return HttpResponse(template.render(context, request)) 
else: 
    template = loader.get_template('o/cart.html') 
    context = {} 
    return HttpRepsonse('fail') 
    # return HttpResponse(template.render(context, request)) 

のように、私は私のcart.htmlにデータを渡す必要があります（これは私のモデルのオブジェクトです）。カートのページにデータを渡す方法がわかりません。

print(chosen, file=sys.stderr)という行は非常に便利です。 以前は、コメントアウトされた戻りのHttpResponse行を使用したコードがあったときに、目的の配列と空の配列の両方を端末に出力しました。しかし、この新しいコードでは、目的の配列が印刷されますが、新しいページにはリダイレクトされません。私はなぜこれが起こっているのか分かりませんが、私の以前の試みでも空の配列が印刷されたという事実は、カートのページが正しい配列データを受け取っていないことを意味しています。

編集：私は、私は場合、私はjavascriptの

index.htmlを

<form id="getArr" method="POST"> 
     {% csrf_token %} 
     <button type='submit' id="checkCart">Check Added Items</button> 
</form> 

Answer 1

を通じて行うことができない（私が知っているから）、新しいHTMLページにモデルオブジェクトを渡す必要があります正しく質問を理解して、私はあなたがJQueryを使って余分なステップを追加していると思います。

ソリューション＃1 - jQueryでフォーム要素を作成し、そのフォームをDjangoエンドポイントに送信します。 Djangoではテンプレートをレンダリングします。

Javascriptを

$("#getArr").submit(function(){ 
    var url = 'cart/'; 
    var form = '<form action="' + url + '" method="post">'; 
    for (var i = 0; i < chosen.length; i++) { 
     form += '<input type="hidden" name="ab[]" value="' + chosen[i] + '" />' 
    }; 
    form += '</form>' 
    var form_element = $(form); 
    $('body').append(form_element); 
    form_element.submit(); 
}); 

そして、あなたのビューでは、単にいつものようにテンプレートを返す：

views.py

def cart(request): 
    if request.method == 'POST': 
    chosen = request.POST.getlist('ab[]') 
    print(chosen, file=sys.stderr) 
    template = loader.get_template('o/cart.html') 
    context = {'prodChosen': chosen, 
       'e': "hy"} 
    return HttpResponse(template.render(context, request)) 
else: 
    template = loader.get_template('o/cart.html') 
    context = {} 
    return HttpRepsonse('fail') 
    # return HttpResponse(template.render(context, request)) 

溶液＃2 - 利用jQuery .load() function関数とsuそのフォームをあなたのDjango要素に置きます。 Djangoでは、テンプレートを通常どおりに（または他のページ要素を繰り返さないようにスニペットとして）レンダリングします。

Javascriptを

$("#getArr").submit(function(){ 
    $('#main-content-div').load('cart/', $("#getArr").serialize()); 
}); 

views.py

def cart(request): 
    if request.method == 'POST': 
    chosen = request.POST.getlist('ab[]') 
    print(chosen, file=sys.stderr) 
    template = loader.get_template('o/cart.html') 
    context = {'prodChosen': chosen, 
       'e': "hy"} 
    return HttpResponse(template.render(context, request)) 
else: 
    template = loader.get_template('o/cart.html') 
    context = {} 
    return HttpRepsonse('fail') 
    # return HttpResponse(template.render(context, request)) 

溶液＃3からab[]に名前を付け、あなたのDjangoのエンドポイントにそのフォームを送信要素と、一般的なHTMLフォームを作成します。 Djangoではテンプレートをレンダリングします。

形式：

HTML

<form id="getArr" action="cart/" method="POST"> 
    <input type="text" name="ab[]" value="product_id_1"/> 
    <input type="text" name="ab[]" value="product_id_2"/> 
    <input type="text" name="ab[]" value="product_id_3"/> 
    <input type="submit" value="Submit" /> 
</form> 

いくつかのJavascriptのフォームに要素を追加するには：

Javascriptを

$('.add_product').click(function(){ 
    $('#getArr').append('<input type="hidden" name="ab[]" value="' + $(this).attr('product_id') + '"/>') 
}) 

Djangoのビュー：

views.py

def cart(request): 
    if request.method == 'POST': 
    chosen = request.POST.getlist('ab[]') 
    print(chosen, file=sys.stderr) 
    template = loader.get_template('o/cart.html') 
    context = {'prodChosen': chosen, 
       'e': "hy"} 
    return HttpResponse(template.render(context, request)) 
else: 
    template = loader.get_template('o/cart.html') 
    context = {} 
    return HttpRepsonse('fail') 
    # return HttpResponse(template.render(context, request))