首页写一个完整的前端 fetch 后端 django views处理的例子

写一个完整的前端 fetch 后端 django views处理的例子

时间: 2024-02-13 15:00:13 浏览: 86

好的，以下是一个完整的前端fetch后端django views处理的例子：前端代码（HTML、JS部分）： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Fetch Example</title> </head> <body> <h1>Fetch Example</h1> <button id="fetchBtn">Fetch Data</button> <div id="response"></div> <script> const fetchBtn = document.getElementById('fetchBtn'); const responseDiv = document.getElementById('response'); fetchBtn.addEventListener('click', () => { fetch('/api/data') .then(response => response.json()) .then(data => { responseDiv.innerHTML = `Data: ${data}`; }) .catch(error => { console.error(error); }); }); </script> </body> </html> ``` 这是一个简单的HTML页面，它包含一个按钮和一个用于显示响应的div元素。当用户单击“Fetch Data”按钮时，它将使用fetch API从后端获取数据。后端代码（Django views部分）： ```python from django.http import JsonResponse def data(request): data = 'Hello, World!' return JsonResponse(data, safe=False) ``` 这是一个简单的Django视图，它返回一个JSON响应。我们将其设置为响应前端代码中的/api/data路径。现在，当用户单击“Fetch Data”按钮时，前端代码将向后端发送GET请求，该请求将由Django视图处理。视图将返回一个JSON响应，其中包含数据“Hello, World!”。前端代码将显示响应中的数据。希望这个例子对你有所帮助！

阅读全文