DJANGO 将 AJAX 请求中的新结果值渲染到 HTML 页面

Question

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

我可以在 django views.py (validate_number) 中使用 AJAX 成功地获取表单输入值（工作）遵循此 example 。 在这个 views.py validate_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>

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) {
}
});

urls.py:

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

views.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'.
    */
}
});

index.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 id="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>

查看

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):
    # You had request.GET, but your form method is POST.
    number1 = request.POST.get('number1', None)
    print number1
    number2 = request.POST.get('number2', None)
    print number2
    sum=int(number1)+int(number2)
    # render a template with the given key: value to be sent to AJAX.
    sum_json = render_to_string('sum_template.html', {'sum': sum})
    """
    Assuming the information for sum_2 etc. uses the same format,
    we can use the same template
    """
    sum_json_2 = render_to_string('sum_template.html', {'sum': sum_2})
    # Send the dictionary to AJAX. This is what we called 'data'.
    return JsonResponse({'sum_json': sum_json, 'sum_json_2': sum_json_2})

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

sum_template.html

{{ sum }}

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

if request.is_ajax() and request.POST:

过滤掉非 AJAX 请求。

有人告诉我有更好的方法来做到这一点。我只是自己弄清楚了这一切，不知道它们是什么。如果您需要更多详细信息，请告诉我。

Answer 2

我将在这里展示一个最小的计算应用。我们给出两个带有操作愿望的数字，django 进行计算并以 json 格式返回答案。 请注意，我使用了 ajax / jquery 回调概念，并在 django 视图中使用 csrf_exempt 禁用了 csrf 控件。

HTML/javaScript：

    <div class="container">
        <form class="col-lg-6" id="form">
          <legend>Select number to make an operation</legend>
            Number 1: <input type="number" class="form-control" id="n1">
            Number 2: <input type="number" class="form-control" id="n2">
            Select operation:
              <select class="form-control" name="op" id="op">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
              </select>
            <input type="submit" id="submit" value="Send">
        </form>
        <div>
            <h2 class="result-box">The result is : <strong id="result"></strong></h2>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function() {
            function call_ajax(f) {
                const n1 = $('#n1').val();
                const n2 = $('#n2').val();
                const op = $('#form option:selected').text();
                const data = {n1: n1, n2: n2, op: op}
                // you can verify the data in the browser console
                console.log(data);
                $.ajax({
                    url: '/ajax/make_operation/',
                    data: data,
                    type: 'POST',
                    success: f,
                    error: function(error) {
                        console.log(error);
                    }
                });
            }

            function server_response(response) {
                // convert to json format
                const r = JSON.parse(response);
                console.log(r);
                // include the result in the dom
                var text = document.createElement('i');
                text.innerHTML = '<strong id="result">' + r.result + '</strong>';
                $('#result').replaceWith(text);
            }

            //Validate
            $('#form').submit(function(e) {
                e.preventDefault();
                call_ajax(server_response);
            });
        });
    </script>
  </body>
</html>

views.py：

    from django.shortcuts import render
    from django.http import JsonResponse
    from django.views.decorators.csrf import csrf_exempt
    import json


    @csrf_exempt
    def make_operation(request):
    if request.method == 'POST':
        # recovert the data sending by the ajax post request
        number1 = int(request.POST['n1'])
        number2 = int(request.POST['n2'])
        operation = request.POST['op']
        print(operation)
        result = None

        # make the operation
        if operation is '+':
            result = number1 + number2
        elif operation is '-':
            result = number1 - number2
        elif operation is '*':
            result = number1 * number2
        else:
            result = number1 + number2

        # return the result to the ajax callback function
        return JsonResponse(json.dumps({'result': result}), safe=False)
    return render(request, 'index.html')

urls.py

from django.contrib import admin
from django.urls import path
from ajax import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ajax/make_operation/', views.make_operation),
]

所以有很多选择可以做到这一点。我只展示了一种使用 django 进行 ajax 的方法（没有 django-form）。