DJANGO将新的结果值从AJAX请求呈现到htmlpag

Question

在过去的几天里，我尝试学习在后端使用AJAX和django提交表单。在

我可以在django中使用AJAX成功地获取表单输入值视图.py（validate_number）（工作）遵循这个example。 在这个视图.pyvalidate_number我计算新的数字和，我希望这个和值呈现回html页面，但我不知道怎么做。在

你知道如何将AJAX请求的结果呈现回html页面吗？在

这里是密码

html表单：

<form id="form" action='' data-validate-number-url="{% url 'validate_number' %}" method="POST" enctype="multipart/form-data">{% csrf_token %}
<div class="form-group col-md-6">
Select the C Raster dataset:<br>
   <select name="CC" class="form-control" id="CC"> 
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
Select the P:<br>
   <select name="PP" class="form-control" id="PP">
     <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
Select the F:<br>
   <select name="FF" class="form-control" id="FF">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
    </div>
<button type="button" class="btn btn-primary next-step1">Save and continue</button>


    <p>{{sum}}</p>


Select the GG:<br>
   <select name="G" class="form-control" id="GG">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
Select the JJ:<br>
   <select name="JJ" class="form-control" id="JJ">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
  </select>
<button type="button" class="btn btn-primary next-step">Save and continue</button>
Select the FINAL:<br>
   <select name="FINAL" class="form-control" id="FINAL">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="10">ten</option>
  </select>
 <button type="submit" class="btn btn-primary">Save</button>
</form>

阿贾克斯

^{pr2}$

在网址.py公司名称：

url(r'^details/(?P<slug>[^\.]+)/$', views.blog_details, name='blog_details'),
url(r'^ajax/validate_number/$', views.validate_number, name='validate_number'),

在视图.py在

def blog_details(request,slug):
    posts=mymodel.objects.all()
    post=get_object_or_404(posts, slug_title=slug)
    return render(request,'index.html',{'post':post})


def validate_number(request):
    number1 = request.GET.get('number1', None)
    print number1
    number2 = request.GET.get('number2', None)
    print number2
    sum=int(number1)+int(number2)
    return JsonResponse(sum)

Answer 1

在AJAX成功块中，您必须告诉它您希望它如何处理这些信息：

$(".next-step1").click(function (e) {
var form = $(this).closest("form");
var number1 = $("#CC").val();
var number2 = $("#PP").val();
$.ajax({
url: form.attr("data-validate-number-url"),
data:  {
      'number1': number1,
      'number2':number2
    },
dataType: 'json',
success: function (data) {
// 'data' is the dictionary received from the view.
// You could call it whatever you want.
    $('#sum).html(data.sum_json);
    /* Find 'id="sum"' and replace what's inside the tags(or innerHTML)
       with the dictionary value of 'sum_json'.
       If other keys exist in the 'data' dictionary,
       they are accessed the same way, as in 'data.sum_json_2'.
    */
}
});

在索引.html在

^{pr2}$

视图

^{3}$

这是我们render_to_string发送给AJAX的模板。它呈现模板的方式与render相同。在

总和_模板.html在

{{ sum }}

您不希望render_to_stringindex.html，因为您在<p>中插入了整个index模板，而不仅仅是sum。您可能还想在视图中添加if语句

if request.is_ajax() and request.POST:

过滤掉非AJAX请求。在

我听说有更好的方法。我只是自己想出来的，不知道是什么。如果你需要更多的细节请告诉我。在