AJAX POST 到 DJANGO 并将结果返回到前端

Question

我正在尝试编写一个使用 javascript "JQUERY" $get 的工具。以异步方式从多个 API 中获取数据。数据被推送到查询并通过 AJAX 发送到 DJANGO。那行得通，但是..数据应该通过Python在后端编辑，然后应该发送回前端。 问题：数据显示在我对检查器工具 (FIREFOX) 的回答中，但不在我的 HTML 中。

我的 HTML：

<form method="POST" action="/my_page/" id="test_form">
 {% csrf_token %}
 <input type="text" id="name" name="name" placeholder="Type Keywords ...">
 <input type="submit" value="GO!"></input>
</form>                                      

                                   
<tbody>
{% for task in tasks %}                                
 <tr>
  <td>
   {{ task }}
  </td>
 </tr>
{% endfor %}
</tbody>

js:

$(document).on('submit','#test_form', function(e){
    e.preventDefault();

    var daten = [];
    var input = $('#name').val();
    var apis = [
        API1, API2, API3,...... and so on to API 50
    ];

    var api;
    for (api of apis){
        $.get(api, function(data){
            for (bla of data.suggestions){
                daten.push(bla.value)
            };
        });
    };


    const promise3 = new Promise((resolve, reject) => {
        setTimeout(resolve, 2000, daten);
    });
    
    Promise.all([promise3]).then((values) => {

        $.ajax({
            type: 'POST',
            url: '/my_page/',
            data: {'daten[]': values},
            
            success:function(data){
                console.log(data);
            }
        });
        return false;
    });
});

views.py：

@csrf_exempt
def my_page(request):

        if request.is_ajax():
            tasks = request.POST.getlist('daten[]')

            print(tasks) #That works fine
                

            return render(request, 'myApp/my_page.html', {
                'tasks':tasks,
            })

        else:
            return render(request, 'myApp/my_page.html')

我已经研究了几天的解决方案，但我快要绝望了。有人可以帮帮我吗？

Answer 1

所以我假设console.log(data) 中打印的是 HTML 响应。

您需要做的是动态替换 DOM 的内容。 HTML

<div id="my-container-id">
  <form method="POST" action="/my_page/" id="test_form">
   {% csrf_token %}
   <input type="text" id="name" name="name" placeholder="Type Keywords ...">
   <input type="submit" value="GO!"></input>
  </form>                                      

                                   
  <tbody>
  {% for task in tasks %}                                
   <tr>
    <td>
     {{ task }}
    </td>
   </tr>
  {% endfor %}
  </tbody>
</div>

js

    Promise.all([promise3]).then((values) => {

        $.ajax({
            type: 'POST',
            url: '/my_page/',
            data: {'daten[]': values},
            
            success:function(data){
                console.log(data);
                $('#my-container-id').replaceWith(data);
            }
        });
        return false;
    });

编辑：更新了我的答案，使其更具插件性和可用性