2017-07-19 78 views
0

我正在尋找一種方法來在表單提交後輸出表單(在div中)的輸入。經過大量研究,我找不到解決方案。我想我需要使用AJAX,但不確定。有沒有合適的Django方法來完成這項工作,還是需要使用AJAX?如何使用額外的模型字段輸出輸入表單數據Django

像這樣的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 %} 

回答

0

據我所知,沒有一個簡單的方法,只有Django的做到這一點。我會使用jquery ajax來提交表單,然後用響應更新div。需要一些設置才能使您的csrf令牌與ajax一起工作。 Django csrf ajax setup。然後使用JsonResponse而不是HttpResponseRedirect將JSON發送到前端。

+0

謝謝!我會試着從這裏弄清楚它:-) – sandermander

相關問題