Django表单提交无刷新效果实现失败，求正确AJAX配置方案

现有代码核心问题 #

• jQuery选择器语法错误：获取输入值的$('name')、$('email')缺少id选择器标识#，无法正确读取表单内容
• AJAX参数配置错误：dataType参数被错误放在了data对象内部，请求逻辑失效
• 视图逻辑重复且冲突：新增的ajax_posting视图未实现存库、邮箱校验、发邮件的核心业务逻辑，且URL配置将其name设为index，和原首页路由冲突
• 回调逻辑无对应容器：HTML中没有id为output的元素，请求成功后的消息无法展示

具体修复步骤 #

1. 替换原jQuery代码 #

修正选择器、参数位置和消息插入逻辑：

$('#form').on('submit', function(e){
    e.preventDefault(); // 阻止表单默认提交刷新行为
    $.ajax({
        type: "POST", 
        url: "{% url 'index' %}", // 直接提交到原有首页视图即可，无需新增路由
        data: {
            name: $('#name').val(), // 修正id选择器
            email: $('#email').val(), // 修正id选择器
            csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        dataType: "json", // 移到和type、url同级的位置
        success: function(data){
            // 直接将返回消息插入到提交按钮下方，无需新增元素
            $('.submit').after(`<div class="alert alert-${data.type} mt-2">${data.msg}</div>`);
            // 提交成功后清空表单
            $('#form')[0].reset();
        },
        error: function() {
            $('.submit').after('<div class="alert alert-danger mt-2">提交失败，请稍后重试</div>');
        }
    });
});

2. 修改原index视图，适配AJAX请求 #

不需要额外新增单独的AJAX视图，直接在原视图中区分普通请求和AJAX请求即可：

from django.http import JsonResponse

def index(request):
    """网站首页视图"""
    if request.method == 'POST':
        form = NewsUserForm(request.POST)
        if form.is_valid():
            instance = form.save(commit=False)
            # 校验邮箱是否已存在
            if NewsUsers.objects.filter(email=instance.email).exists():
                msg = '您的邮箱已存在于订阅数据库中'
                msg_type = 'warning'
            else:
                instance.save()
                msg = '订阅成功！您的邮箱已录入我们的数据库'
                msg_type = 'success'
                # 发送欢迎邮件
                try:
                    send_mail('欢迎订阅', '感谢您订阅我们的通讯', 'user123@gmail.com',[instance.email], fail_silently=False)                 
                except BadHeaderError:
                    # 判断是否为AJAX请求，返回对应格式的响应
                    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
                        return JsonResponse({'msg': '请求头异常', 'type': 'danger'}, status=400)
                    return HttpResponse('Invalid header found.')
            # 处理AJAX请求返回JSON响应
            if request.headers.get('x-requested-with') == 'XMLHttpRequest':
                return JsonResponse({'msg': msg, 'type': msg_type})
            # 普通请求仍走原有消息提示逻辑
            if msg_type == 'success':
                messages.success(request, msg)
            else:
                messages.warning(request, msg)
    form = NewsUserForm()
    return render(request, 'index.html', {'form':form})

3. 清理无效配置 #

删除你之前新增的ajax_posting视图，以及对应的URL配置，保留原首页的URL配置即可。

4. 确认依赖引入 #

确认你的HTML页面已经正确引入jQuery库，如果未引入，在页面</body>标签前添加如下代码：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>

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