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

发布时间:2020-07-07 16:53

我正在尝试编写一个使用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')

我一直在研究解决方案好几天了,但我感到绝望。有人可以帮我吗?

回答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;
    });

编辑:更新了我的答案,使其更易于使用和插入