如何从 Django API 获得对调用 HTML 页面的响应，我将图像发布到 Api？

Question

如何从另一个 Django 项目（或任何其他项目）调用 Django API，并在同一调用页面（我调用 API 的页面）上进行一些处理后获取响应

我正在从表单操作调用 API ....但 API 在新的空白页面中显示响应

这里是 API 代码：（//跳过一些代码以避免混淆）

def IdealWeight(request):
 
#defining a list of data to send back to html
list_of_data=[]
list_of_data.append(name)
list_of_data.append(fatherName)
list_of_data.append(registration)

print(list_of_data)

# outPut_Data = ast.literal_eval(list_of_data)

    # return render(request,'LibraryForm.html',{'data1':outPut_Data})


 return JsonResponse(list_of_data,safe=False)

我希望调用页面上的 list_of_data 在某个变量中。

这是我调用 API 的 HTML 代码：

 <form action="http://127.0.0.1:8000/idealweight/?image/" method="POST" enctype="multipart/form-data">
      {% csrf_token %}

    
          <input type="file" class="form-control-file" name="image" onchange="readURL(this);"  required>
       
          <input type="submit" class=" btn btn-primary" title="Process" value="Process" id="processButton">
        </div> 

     

      {{ data1 }}
      
         </form>

从 HTML 页面，我正在向 API 发送图片（API 构建在 Django 中） 从那开始，我想发送一个从图像中提取的数据数组或列表，并希望在同一个 HTML 页面上显示它......................我从中调用 API 我该怎么做？ 希望我清楚我想要什么？

Answer 1

使用 Ajax 调用会是更好的选择。你会做一些事情。

$(document).ready(function (e) {
    $('#upload').on('click', function () {
        var file_data = $('#file').prop('file');
        var form_data = new FormData();
        form_data.append('file', file_data);
        $.ajax({
          url: 'http://127.0.0.1:8000/idealweight/?image/',
          contentType: false,
          data: form_data,
          type: 'post',
          success: function (response) {
                       // use response to update html
                   },
          error: function (response) {
                       // use response to update html
                  }
          });
     });
});

你的模板会是这样的

<input type="file" id="file" name="file"/>
<button id="upload" type="button">Process</button>

注意：您可能会收到 cross origin request block 错误。所以你必须明确允许。