Django中AJAX表单自动补全功能报错排查求助

以下是针对你Django表单自动补全功能的核心排查点和修复方案：

1. 确认URL路由配置正确性 #

检查项目或应用的urls.py，确保已正确定义name='percobaan'的路由，且对应视图能处理GET请求：

# 示例urls.py
from django.urls import path
from .views import autocomplete_produk

urlpatterns = [
    # 其他路由...
    path('autocomplete-produk/', autocomplete_produk, name='percobaan'),
]

• 核对路由路径、视图函数名称及导入语句，避免拼写错误。

2. 验证AJAX URL渲染结果 #

• 打开浏览器开发者工具（F12），切换到Network标签，查看AJAX请求的实际URL是否与路由匹配。如果{% url 'percobaan' %}未被正确渲染，可能是因为：
  • 该标签写在了外部JS文件中（Django模板标签仅在HTML模板内生效），需改为在模板中定义全局变量后再引入外部JS：

    <!-- HTML模板内的写法 -->
    <script>
        const autocompleteUrl = "{% url 'percobaan' %}";
    </script>
    <script src="/static/js/your-autocomplete-script.js"></script>
    

  • 模板未正确继承基础模板或未加载模板标签库（若使用了自定义标签）。

3. 检查视图函数逻辑 #

确保视图能正确处理AJAX请求、过滤数据并返回JSON：

# 示例views.py
from django.http import JsonResponse
from .models import Produk

def autocomplete_produk(request):
    # 替换为Django 3.1+的AJAX判断方式（原request.is_ajax()已弃用）
    if request.method == 'GET' and request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        query = request.GET.get('q', '')
        # 替换为你的Produk模型中用于匹配的字段（比如nama_produk）
        produk_list = Produk.objects.filter(nama_produk__icontains=query)[:10]
        results = [{'id': p.id, 'name': p.nama_produk} for p in produk_list]
        return JsonResponse(results, safe=False)
    return JsonResponse([], safe=False)

• 核对模型字段名称，避免字段拼写错误。
• 可直接在浏览器地址栏访问渲染后的URL（如http://localhost:8000/autocomplete-produk/?q=测试），检查是否返回预期的JSON数据。

4. 修正前端AJAX代码 #

确保请求方法、参数传递及结果渲染逻辑正确：

$(document).ready(function() {
    // 替换为你的输入框ID
    $('#produk-input').on('input', function() {
        const query = $(this).val().trim();
        if (!query) {
            $('#autocomplete-results').empty();
            return;
        }
        $.ajax({
            url: autocompleteUrl,
            method: 'GET',
            data: { q: query },
            success: function(data) {
                // 替换为你的补全结果容器ID
                const $results = $('#autocomplete-results').empty();
                data.forEach(item => {
                    $results.append(`<div class="autocomplete-item" data-id="${item.id}">${item.name}</div>`);
                });
            },
            error: function(xhr, status, error) {
                console.error('请求错误:', error);
                console.error('响应状态:', xhr.status);
            }
        });
    });
});

• 检查输入框、结果容器的ID是否与JS选择器匹配。
• 若使用原生JS而非jQuery，需调整AJAX请求的写法。

5. 排除CSRF或跨域问题 #

• 若为同域GET请求，无需传递CSRF令牌；若后续改为POST请求，需在请求头中添加CSRF令牌：

  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;
  }
  $.ajaxSetup({
      headers: { "X-CSRFToken": getCookie("csrftoken") }
  });
  

• 若为跨域请求，需在Django中配置CORS（可使用django-cors-headers库）。

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