如何在Django环境中实现AJAX按钮请求？解决JS-Python交互报错

问题背景 #

我想把JS字符串变量传给Python函数处理后返回给JS，采用JSON/AJAX实现。现有HTML元素：

<h2 id="output"></h2>

计划通过AJAX获取该元素的值，传给后端Python脚本检查是否为真实英文单词（返回true/false），但当前AJAX代码返回undefined变量，点击按钮会执行error回调，控制台打印undefined。

现有代码 #

HTML元素 #

<h2 id="output"></h2>
<button id="submit_word">提交</button>
<div id="check-word"></div>

AJAX代码 #

$(document).ready(function() {
  $('#submit_word').click(function() {
      var word = $("#output").val();
      $.ajax({
          url: '{% url 'wordgame' %}', // 不确定是否正确
          type: 'POST',
          dataType: 'json',
          data: {word:word, csrfmiddlewaretoken: "{{ csrf_token }}",},
          success: function(response) {
              var word_result = JSON.parse(response.result);
              console.log(response.result);
              $("#check-word").text(word_result);
          },
          error: function(response) {
              console.log(response.result);
          }
      });
  });
});

Django Views函数 #

def fetch_word(request):
    word = request.POST.get('word')
    result = check_if_word_in_dictionary(word)
    return JsonResponse({'result': result})

错误现象 #

点击submit_word按钮后，AJAX触发error回调，控制台打印undefined，无法获取后端返回的结果。

修复步骤 #

• 修正h2元素取值方式：h2不是表单元素，不能用val()方法，改用text()获取内容，同时去除首尾空格：

  var word = $("#output").text().trim();
  

• 确认URL路由匹配：检查urls.py中wordgame名称对应的视图是否为fetch_word函数，比如：

  from django.urls import path
  from . import views
  
  urlpatterns = [
      path('wordgame/', views.fetch_word, name='wordgame'),
  ]
  

  如果路由名称或路径不匹配，会返回404错误触发error回调。

• 移除冗余的JSON解析：因为dataType: 'json'已让jQuery自动解析响应为JSON对象，无需再调用JSON.parse，直接使用response.result：

  success: function(response) {
      var word_result = response.result;
      console.log(word_result);
      $("#check-word").text(word_result);
  }
  

• 优化error回调的错误排查：jQuery的error回调参数是jqXHR对象，不是后端返回的JSON，要查看错误详情需打印状态码和响应文本：

  error: function(xhr, status, error) {
      console.log('状态码:', xhr.status);
      console.log('响应文本:', xhr.responseText);
      console.log('错误信息:', error);
  }
  

• 增强后端函数的健壮性：添加请求方法判断、参数校验和异常捕获，避免后端报错触发500错误：

  def fetch_word(request):
      if request.method != 'POST':
          return JsonResponse({'error': '仅支持POST请求'}, status=405)
      
      word = request.POST.get('word', '').strip()
      if not word:
          return JsonResponse({'result': False})
      
      try:
          result = check_if_word_in_dictionary(word)
          return JsonResponse({'result': result})
      except Exception as e:
          print('后端错误:', e) # 打印到Django控制台排查
          return JsonResponse({'result': False}, status=500)
  

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