如何通过AJAX/JavaScript为Django表单发送POST请求并获取返回结果

你现有代码的问题主要出在前端请求构造逻辑有误，按以下方式修改即可完成表单与接口的对接：

核心修改点 #

• 移除无意义的JSON.parse()调用，避免用户输入纯URL时直接触发语法报错
• 补充Django POST请求强制要求的CSRF Token请求头，避免403权限拦截
• 构造符合后端接收规则的请求体，正确传递输入的URL参数
• 正确解析后端返回的JSON结果，提取校验状态字段展示

修复后的前端代码（仅需替换原有script标签内容） #

(function () {
  var output = document.getElementById('output');
  // 获取页面中Django自动生成的CSRF Token
  var csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  
  document.getElementById('post').onclick = function () {
    var inputUrl = document.getElementById('data').value.trim();
    // 增加空输入校验
    if (!inputUrl) {
      output.className = 'container text-danger';
      output.innerHTML = '请输入要检测的HTTPS URL';
      return;
    }

    axios.post(
      '/predict/', // 同域部署可直接用相对路径，无需写死IP端口
      { url: inputUrl }, // 此处键名需和后端接收参数名保持一致，可按需调整
      { headers: {'X-CSRFToken': csrftoken} } // 携带CSRF校验头
    )
    .then(function (res) {
      output.className = 'container';
      // 提取后端返回的检测结果展示
      output.innerHTML = `检测结果：${res.data.Response}`;
    })
    .catch(function (err) {
      output.className = 'container text-danger';
      output.innerHTML = `请求失败：${err.message}`;
    });
  };
})();

后端适配说明（如你使用普通Django视图而非DRF，可参考该逻辑调整） #

import json
def predict(request):
    if request.method == 'POST':
        # 解析前端传递的JSON请求体
        body = json.loads(request.body)
        test = body.get('url')
        # 原有ML模型检测逻辑保持不变
        if list(model.predict([test]))[0] == 1:
            return JsonResponse({"Response":"合法站点"})
        else:
            return JsonResponse({"Response":"钓鱼或伪造站点"})

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