Django中Ajax表单无法提交数据的问题排查求助

1. 模板标签未解析的问题 #

当你使用url:'{% url "home" %}'时出现%7B%%20url%20%22home%22%20%%7D编码字符串，说明Django模板引擎未解析该标签，原因及解决方法如下：

• 若JS代码在外部.js文件中：Django仅解析HTML模板内的标签，外部JS不会被处理。需在HTML模板中先将URL存入全局变量：

  <script>
    const homeUrl = "{% url 'home' %}";
  </script>
  

  再在外部JS中用homeUrl作为Ajax的url值。
• 若JS写在HTML模板内：确保模板被Django正确渲染，可调整引号格式避免解析异常：

  url: "{% url 'home' %}",
  

2. Ajax数据获取错误 #

你的JS代码中获取输入值的选择器缺失#符号：原代码$("id_text").val()会查找标签名为id_text的元素，而非ID为id_text的输入框，导致无法获取数据。修正后：

data:{
    text: $("#id_text").val(), // 加上#符号
    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},

3. Django视图逻辑优化 #

原视图存在bug：GET请求时会绑定空POST数据生成表单，可能引发不必要的错误提示。同时Ajax请求需返回JSON响应，而非渲染页面：

from django.http import JsonResponse

def home(request):
    if request.method=='POST':
        form = MyForm(request.POST)
        if form.is_valid():
            form.save()
            return JsonResponse({'status': 'success'})
        # 可选：返回表单错误信息
        return JsonResponse({'status': 'error', 'errors': form.errors})
    else:
        form = MyForm() # GET请求创建空表单
    return render(request,'home.html',{'form':form})

4. 完整修正后的JS示例（HTML模板内） #

$(document).on('submit','#post-form', function(x){
    x.preventDefault();
    console.log("button clicked")
    $.ajax({
        type:'POST',
        url: "{% url 'home' %}",
        data:{
            text: $("#id_text").val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success:function(response){
            alert('Saved');
            // 可选：清空表单
            $("#id_text").val('');
        },
        error:function(){
            alert('保存失败，请检查输入');
        }
    })
})

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