Django Web应用中语音转文本后AJAX POST请求无响应问题求助

看起来你的录音和转文本功能都正常，只是点击Send按钮没反应，大概率是AJAX请求配置或后端处理逻辑的问题，我帮你梳理几个关键排查点和解决方案：

1. 规范处理CSRF令牌（即使加了@csrf_exempt也别忽略） #

虽然你在视图里加了@csrf_exempt，但浏览器安全策略或Django的默认配置可能仍会拦截请求。更稳妥的做法是在AJAX中带上CSRF令牌：

• 先在HTML模板里添加CSRF令牌标签：

  {% csrf_token %}
  

• 然后修改AJAX代码，添加CSRF头部：

  $(document).ready(function() {
    $("#send").click(function(event){
      // 获取页面中的CSRF令牌
      var csrftoken = $('[name=csrfmiddlewaretoken]').val();
      $.ajax({
        type:"POST",
        url:"/audio_data/",  // 注意末尾添加斜杠，下文会解释原因
        headers: { "X-CSRFToken": csrftoken },  // 带上CSRF头部
        data: { send : $('#result').html() },
        success: function(response) {
          // 请求成功后跳转到success页面
          window.location.href = "/success/";
        },
        error: function(xhr, status, error) {
          // 打印错误信息方便排查
          console.log("请求出错：", error);
          console.log("状态码：", xhr.status);
        }
      });
    });
  });
  

2. 修正URL路径的斜杠问题 #

你的urls.py里配置的是path('audio_data', views.audio_data)，而AJAX的请求地址是"/audio_data"。Django默认开启APPEND_SLASH设置（会自动给末尾无斜杠的URL添加斜杠并重定向），这会导致AJAX的POST请求被重定向为GET请求，后端视图的POST分支根本不会触发。

解决方法二选一：

• 把urls.py里的路径改成带斜杠的：

  path('audio_data/', views.audio_data)
  

• 或者直接修改AJAX的请求地址为"/audio_data/"

3. 调整后端视图的返回逻辑 #

你当前的视图在POST请求后返回render(request, 'success.html')，但AJAX请求并不会自动跳转到这个页面——它只会接收返回的HTML内容，不会主动替换当前页面。如果你想跳转到success页面，推荐两种方式：

• 方式一：前端AJAX回调里跳转（更灵活）
  就是上面AJAX代码中的window.location.href = "/success/";，同时需要在urls.py中配置success页面的路由：

  path('success/', views.success_view)
  

  然后在views.py中添加对应视图：

  def success_view(request):
      return render(request, 'success.html')
  

• 方式二：后端返回JSON让前端处理
  修改视图返回JSON数据：

  from django.http import JsonResponse
  
  @csrf_exempt
  def audio_data(request):
      if request.method == 'POST':
          result = request.POST['send']
          # 这里可以添加对result的业务处理，比如保存到数据库
          return JsonResponse({"status": "success", "redirect_url": "/success/"})
      elif request.method == 'GET':
          return render(request, 'afterContinue.html')
  

  然后在AJAX的success回调中根据返回值跳转：

  success: function(response) {
    if (response.status === "success") {
      window.location.href = response.redirect_url;
    }
  }
  

4. 用浏览器开发者工具排查请求状态 #

打开浏览器开发者工具（按F12），切换到Network标签，点击Send按钮观察请求情况：

• 如果没有请求发出：说明按钮的点击事件绑定有问题，检查jQuery是否正确引入到模板中
• 如果有请求，查看状态码：403代表CSRF验证失败，301/302代表重定向问题，404代表URL路径错误

按上面的步骤调整后，Send按钮应该就能正常工作了！

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