Django中Ajax提交表单后跳转至显示响应数据的空白页如何解决

表单提交后跳空白页的核心原因是前端JS事件绑定完全失效，浏览器没有执行你写的提交拦截逻辑，直接走了原生表单POST提交流程，最终跳转到接口返回JSON数据的空白页，和后端Django视图逻辑无关。

具体JS错误点如下：

• $.each('.likeForm') 用法完全错误：$.each是jQuery用来遍历数组/对象的方法，不能直接传选择器字符串做元素选择，这行代码会直接抛出JS异常，后续的事件绑定、提交拦截逻辑全部不会执行。
• Ajax配置项位置错误：datatype、cache、async是和type、url平级的Ajax全局配置，你把这几个参数写到了data请求体对象内部，会导致请求配置异常。
• 选择器用法错误：$.each('.counter').text(...) 属于错误用法，更新点赞数不需要调用each遍历，直接选择元素赋值即可。
• 多表单场景逻辑漏洞：直接用$('.likeForm').attr('action')取地址，永远只会拿到页面第一个点赞表单的提交地址，应该从当前触发提交事件的表单实例上取对应地址。

1. 替换原有Ajax代码 #

直接用下面的代码替换你原来写的JS逻辑即可解决跳转问题：

// 正确选择所有点赞表单，绑定submit事件
$('.likeForm').on('submit', function(event){
    event.preventDefault();
    event.stopPropagation();
    // 获取当前触发提交的表单实例
    const currentForm = $(this);
    $.ajax({
        type:'POST',
        url: currentForm.attr('action'), // 取当前表单的提交地址
        data:{
            csrfmiddlewaretoken:"{{ csrf_token }}",
        },
        dataType:'json', // 注意驼峰命名，配置项移到data外层
        cache:false,
        async:true,
        success:function(data){
            // 直接更新页面上所有点赞计数
            $('.counter').text(data.likes_count)
        },
        error: function(){
            // 可自行添加请求失败提示，比如"点赞失败，请重试"
        }
    })
    return false;
})

2. 后端视图可选优化（非必须，解决跳转问题可不改） #

现有后端逻辑可以正常返回数据，可做以下优化提升健壮性：

• 加登录校验装饰器，避免未登录用户访问接口报错
• 用get_object_or_404取帖子对象，避免帖子不存在时返回500错误
• 增加Ajax请求判断，拦截普通表单提交请求

优化后的视图参考：

from django.shortcuts import get_object_or_404
from django.contrib.auth.decorators import login_required
import json

@login_required
def LikePost(request,pk,slug):
    post = get_object_or_404(Post, pk=pk, slug=slug)
    is_like = False
        
    for like in post.post_likes.all():
        if like == request.user:
            is_like=True
            break
    
    if not is_like:
        post.post_likes.add(request.user)
    if is_like:
        post.post_likes.remove(request.user)

    notify=Notification.objects.create(
        notification_type='LP',
        user=post.publisher,
        sender=request.user,
        text_preview=" some one liked your  post"
    )
    likes_count=post.post_likes.count()
    data={
        'likes_count':likes_count,
    }
        
    return HttpResponse(json.dumps(data),content_type='application/json' )

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