Django REST Framework POST提交后未返回主页及Ajax DataTable适配问题

你遇到的核心问题是普通HTML表单的POST提交会让浏览器直接导航到API接口的URL，所以才会看到JSON响应页面。而Ajax DataTable需要的是异步请求——在不刷新页面的情况下获取数据并更新表格，完全不需要页面跳转。

下面是具体的修复步骤：

1. 调整前端表单与JavaScript逻辑 #

首先，给你的筛选表单添加一个ID，并确保包含Django的CSRF令牌（POST请求必须要有），然后通过JavaScript阻止表单的默认提交行为，转而触发DataTable的异步数据刷新：

修改后的表单代码 #

<form id="filter-form" action="{% url 'tableData' %}" method="POST">
    {% csrf_token %} <!-- 必须添加，Django验证POST请求需要 -->
    <!-- 这里补充你的筛选控件，示例如下 -->
    <input type="number" name="mcap" id="mcap-input" placeholder="市值起始值">
    <select name="cat" id="cat-select">
        <option value="Technology">Technology</option>
        <option value="Finance">Finance</option>
        <!-- 更多行业选项根据你的业务填充 -->
    </select>
    <button type="submit">应用筛选</button>
</form>

修改后的DataTable JavaScript代码 #

$(document).ready(function() {
    // 初始化DataTable，配置异步请求
    var table = $('#datatable').DataTable({
        "processing": true,
        "searching": false,
        "ajax": {
            "url": "{% url 'tableData' %}",
            "type": "POST", // 指定用POST请求
            "headers": {
                // 传递CSRF令牌，避免Django的CSRF验证错误
                "X-CSRFToken": "{{ csrf_token }}"
            },
            "dataSrc": "",
            // 动态传递筛选参数给后端
            "data": function(d) {
                // 从表单中获取当前的筛选值
                d.mcap = $('#mcap-input').val();
                d.cat = $('#cat-select').val();
                // 可根据需求添加更多参数
            }
        },
        "columns": [
            { "data": "company_name" },
            { "data": "company_id" },
            { "data": "companyprice" },
            { "data": "companyvolume" },
            { "data": "companyeps" },
            { "data": "companydps" },
            { "data": "companynta" },
            { "data": "companype" },
            { "data": "companydy" },
            { "data": "companyroe" },
            { "data": "companyptbv" },
            { "data": "companymcap" }
        ]
    });

    // 拦截表单提交事件，阻止页面跳转，转而刷新表格
    $('#filter-form').on('submit', function(e) {
        e.preventDefault(); // 关键：阻止浏览器默认的表单提交跳转
        table.ajax.reload(); // 触发DataTable重新请求数据，自动带上最新的筛选参数
    });
});

2. 优化后端视图（可选但推荐） #

你的TableData视图已经支持POST请求，但可以做一些鲁棒性优化，比如处理参数为空的情况，以及更精准的日期过滤：

from django.utils import timezone
from rest_framework.response import Response
from rest_framework.views import APIView
from .models import StockInfo
from .serializers import TableSerializer
from django.db.models import Q

class TableData(APIView):
    def post(self, request, *args, **kwargs):
        # 获取筛选参数，处理空值情况
        start_range = request.POST.get('mcap')
        sector = request.POST.get('cat')
        
        # 初始化查询集
        stocks = StockInfo.objects.all()
        
        # 添加市值范围筛选（如果参数存在且有效）
        if start_range:
            try:
                start_range = int(start_range)
                end_range = start_range + 29868
                stocks = stocks.filter(companymcap__range=(start_range, end_range))
            except ValueError:
                # 处理无效数字输入，这里选择保留原查询集，也可返回空结果
                pass
        
        # 添加行业筛选（如果参数存在）
        if sector:
            stocks = stocks.filter(company__company_categories__contains=sector)
        
        # 日期筛选：用__date更精准（如果datetimecollect是DateTimeField）
        target_date = timezone.date(2018, 3, 13)
        stocks = stocks.filter(datetimecollect__date=target_date)
        
        serializer = TableSerializer(stocks, many=True)
        return Response(serializer.data)

关键原理说明 #

• 为什么之前会跳转？：普通<form>的method="POST"会让浏览器发送请求后，直接加载响应的URL（也就是你的API接口），所以看到了JSON页面。
• Ajax异步请求的优势：通过JavaScript发送请求，浏览器在后台处理响应，拿到JSON数据后直接更新页面上的DataTable，全程页面不会刷新或跳转，完美符合你的预期流程。
• CSRF令牌的重要性：Django默认会拦截没有CSRF令牌的POST请求，所以不管是普通表单还是Ajax POST，都必须包含CSRF验证信息。

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