AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。现代JavaScript包含fetch API,该API为我们提供了一种纯JavaScript方式来发送AJAX请求。
让我们看一下如何通过获取发出GET和POST请求,以在视图和模板之间传递JSON数据。
GET请求
- 通过获取发出GET请求
通过向其提供视图的URL和适当的headers参数来进行获取GET请求。发出请求后,视图返回请求的数据,然后需要将响应转换为JSON,然后才能将其用于其他操作。
- fetch(URL, {
- headers:{
- 'Accept': 'application/json',
- 'X-Requested-With': 'XMLHttpRequest', //Necessary to work with request.is_ajax()
- },
- })
- .then(response => {
- return response.json() //Convert response to JSON
- })
- .then(data => {
- //Perform actions with the response data from the view
- })
URL
提取将URL作为其第一个参数。根据Django项目的URLconf和视图的配置方式,URL可能包含关键字参数或查询字符串,我们希望在视图中使用该参数来选择请求的数据。
Headers
设置AJAX请求头参数。我们希望数据以JSON形式从视图返回,因此我们将Accept参数设置为application/json。在视图中,我们可能要确保该请求是AJAX请求。通过将设置为“XMLHttpRequest”的“X-Requested-With”标头包括在内,该视图将能够检查请求是否为AJAX。
get不会直接返回数据。它将返回一个response,该response将返回所请求的响应。为了从响应中获取数据,我们必须通过多次使用.then处理程序来使用链式response。第一个.then接收已解析的响应并将其转换为JSON。第二个.then允许我们访问第一个.then返回的数据,并允许我们使用它,然后可以处理这个数据,比如进行更新页面操作。
在视图中处理GET请求
我们需要一个视图来处理来自fetch调用的AJAX请求。这可以通过多种方式完成,但是最简单的方法之一就是使用基于函数的视图,该视图接受请求并返回带有请求数据的JsonResponse。