如何使用额外的模型字段Django输出输入表单数据

时间:2017-07-19 20:45:12

标签: ajax django django-forms django-queryset

我正在寻找一种在提交表单后输出表单输入(在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 %}

1 个答案:

答案 0 :(得分:0)

据我所知,仅使用django并不是一个简单的方法。我会使用jquery ajax提交表单,然后用响应更新div。要使用csrf令牌处理ajax,需要进行一些设置。 this SO question。然后使用JsonResponse而不是HttpResponseRedirect将JSON发送到前端。