如何使用原生JavaScript在Django中发送AJAX请求

可以通过原生JavaScript实现Django中的AJAX请求，无需依赖jQuery，以下基于现代浏览器普遍支持的fetch API给出实现方案，兼容性要求高的场景可替换为XMLHttpRequest实现，逻辑一致。

Django 后端示例（views.py） #

from django.http import JsonResponse

def get_data(request):
    if request.method == "GET":
        # 获取GET参数
        param = request.GET.get("key", "默认值")
        # 业务逻辑处理
        return JsonResponse({"code": 200, "data": param, "msg": "请求成功"})

完成后在urls.py中配置对应路由即可。

前端原生JS代码 #

// 拼接GET请求参数，也可以直接拼在url后面
const params = new URLSearchParams({
  key: "需要传递的参数值"
})
fetch(`/your/get/url/?${params}`)
  .then(response => response.json()) // 解析返回的JSON数据
  .then(res => {
    // 处理返回结果
    console.log(res)
  })
  .catch(error => {
    // 处理请求异常
    console.error("请求出错：", error)
  })

Django默认开启CSRF校验，发送POST请求前需要先获取Cookie中的CSRF令牌，首先给出获取CSRF Token的工具函数：

function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
const csrftoken = getCookie('csrftoken');

Django 后端示例（views.py） #

from django.http import JsonResponse
import json

def post_data(request):
    if request.method == "POST":
        # 如果传递的是JSON格式参数，需要从request.body读取解析
        data = json.loads(request.body)
        param = data.get("key", "默认值")
        # 业务逻辑处理
        return JsonResponse({"code": 200, "data": param, "msg": "提交成功"})

前端原生JS代码 #

fetch("/your/post/url/", {
  method: "POST",
  headers: {
    "X-CSRFToken": csrftoken, // 必须携带CSRF令牌
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    key: "需要传递的参数值"
  })
})
  .then(response => response.json())
  .then(res => {
    console.log(res)
  })
  .catch(error => {
    console.error("请求出错：", error)
  })

• 如果需要传递表单格式的参数，可直接构造FormData对象作为body的值，此时不需要手动设置Content-Type，浏览器会自动生成对应请求头
• 不要为了方便直接给视图加@csrf_exempt装饰器关闭CSRF校验，会带来安全风险
• 若需要处理异步逻辑，也可以用async/await语法改写fetch调用，代码可读性更高

内容的提问来源于stack exchange，提问作者Ankit Kumar