余分なモデルフィールドを使って入力フォームデータを出力する方法Django

Question

フォームが送信された後に（div内の）フォームの入力を出力する方法を探しています。多くの研究の後、私は解決策を見つけることができません。私はAJAXを使う必要があると思いますが、確かではありません。これを実現する適切なDjangoの方法はありますか、AJAXで作業する必要はありますか？

AJAXでこれをどうしますか？

<script> 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', '???'); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState === 4) { 
     document.getElementById('ajax').innerHTML = xhr.responseText; 
    } 
    }; 

    function sendAJAX() { 
    xhr.send(); 
    } 
    </script> 

views.py

def scan_product_view(request): 
    if request.method == 'POST': 
     form = forms.ScanProductForm(request.POST or None) 
     if form.is_valid(): 
      barcode_input = form.cleaned_data.get("barcode_input") 
      amount_input = form.cleaned_data.get("amount_input") 
      p = AddProduct.objects.get(barcode=barcode_input) 
      p.sold = F("sold") + amount_input 
      p.stock_amount = F("stock_amount") - amount_input 
      p.save() 
      messages.success(request, '%s was successfully scanned' %p.title) 
      return HttpResponseRedirect('/scan/') 
    else: 
     form = forms.ScanProductForm() 
    return render(request, 'scanapp/barscan.html', {'form': form}) 

テンプレートHTML

{% block content %} 

<div class="scan-form-master"> 
<form method="POST" action=""> 
    {% csrf_token %} 
    <div class="scan-con">  
     <div> 
      <div class="scan-form"> 
      {{ form }} 
      <input type="submit" class="btn btn-primary" value="Add"> 
      </div> 
      <div class="conf-btn"> 
       <div id="load" onclick="sendAJAX()"> 
        <p>* I want to show the input of the above field input here after the client hit the Add button.</p> 
       </div> 
       <p><input type="submit" class="btn btn-danger" value="Print PDF"> 
       <input type="submit" class="btn btn-success" value="End session"></p> 
      </div> 
     </div> 
    </div> 
</form> 
</div> 
{% endblock %} 

Answer 1

私の知る限り唯一のジャンゴでこれを行う簡単な方法はありません知っています。 jquery ajaxを使用してフォームを送信し、divで応答を更新します。 csrfトークンをajaxと連動させるには、いくつかの設定が必要です。 。次に、HttpResponseRedirectの代わりにJsonResponseを使用してJSONをフロントエンドに送信します。