如何使API更改其数据？

Question

这是我的代码，当它被点击时，它应该检测到表单中输入的URL，然后它运行一个刮板，打印出在URL上找到的电子邮件。我希望结果打印在同一页上。我应该如何制作API来实现这一点

Javascript代码：

function submitURL() {

 const url = document.querySelector("#InputSearch").value;
 const data = { url };

 fetch('http://127.0.0.1:8000/api/', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
   },
   body: JSON.stringify(data),
 })
 .then(response => response.json())
 .then(data => {
   console.log('Success:', data);
 })
 .catch((error) => {
   console.error('Error:', error);
 });
}

创建的当前API（我希望此API获取找到的电子邮件的数据）：

class apiOverview(APIView):
    serializer_class = serializers.EmailsSerializer


    def post(self, request):
        serializer = self.serializer_class(data=request.data)

        if serializer.is_valid():
            url = serializer.validated_data.get('url')
            message = f'The url is {url}'
            return Response({'message': message})
        else:
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

    def patch(self, request, pk=None):
        return Response({'method': 'PATCH'})

    def put(self, request, pk=None):
        return Response({'method': 'PUT'})

    def delete(self, request, pk=None):
        return Response({'method': 'DELETE'})

Answer 1

如果要使用javascript在文档中呈现API调用的结果，响应中的数据为data：

let dataArea = document.createElement('p');
data['dataPoints'].forEach(dataPoint =>
      let dataChunk = document.createElement('p');
      dataChunk.innerText = dataPoint.text;
      dataArea.appendChild(dataChunk);
)

如果您更喜欢使用jQuery，这里有更多选项： https://www.w3schools.com/jquery/jquery_dom_add.asp