电商订单追踪系统JS脚本失效问题求助（附代码）

核心问题分析 #

你现在的问题是表单提交后直接返回了JSON文本，而非让JS获取到JSON数据再渲染页面。这是因为你用了普通表单提交（会刷新页面），而非AJAX异步请求数据，导致JS根本没机会处理返回的JSON。

修复步骤 #

1. 修改视图函数（views.py） #

改用JsonResponse返回数据，确保能被JS正确解析：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

# 测试阶段先豁免CSRF验证，生产环境建议保留CSRF令牌逻辑
@csrf_exempt
def track_order(request):
    if request.method == 'POST':
        ref_code = request.POST.get('ref_code')
        email = request.POST.get('email')
        
        # 你的原有数据库查询逻辑，注意返回可序列化的字典/列表
        order_status_history = [
            {"status": "已下单", "time": "2024-05-20 10:00"},
            {"status": "已发货", "time": "2024-05-21 14:30"},
            # 替换成你从数据库取出的真实数据
        ]
        
        return JsonResponse({
            'success': True,
            'history': order_status_history
        })
    return JsonResponse({'success': False, 'msg': '仅支持POST请求'})

2. 修改HTML表单与JS脚本 #

阻止表单默认刷新行为，用AJAX异步请求并渲染数据：

<!-- 查询表单 -->
<form id="trackForm">
    <input type="text" name="ref_code" placeholder="订单参考码" required>
    <input type="email" name="email" placeholder="绑定邮箱" required>
    <button type="submit">查询订单状态</button>
</form>

<!-- 状态展示容器 -->
<div id="statusDisplay"></div>

<!-- 引入jQuery（确保路径正确） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() {
    $('#trackForm').submit(function(e) {
        // 阻止表单默认提交（刷新页面）
        e.preventDefault();
        
        // 序列化表单数据
        var formData = $(this).serialize();
        
        // 发送AJAX请求
        $.post('/your-track-url/', formData, function(res) {
            if (res.success) {
                // 渲染状态历史到页面
                var html = '<h4>订单状态追踪</h4><ul>';
                res.history.forEach(item => {
                    html += `<li>${item.status} - ${item.time}</li>`;
                });
                html += '</ul>';
                $('#statusDisplay').html(html);
            } else {
                $('#statusDisplay').html(`<p style="color:red;">查询失败：${res.msg}</p>`);
            }
        }).fail(function() {
            $('#statusDisplay').html('<p style="color:red;">网络错误，请重试</p>');
        });
    });
});
</script>

3. 关键检查项 #

• URL匹配：确保AJAX请求的/your-track-url/和你在urls.py中配置的视图路径一致
• 数据序列化：视图返回的order_status_history必须是字典、列表这类可JSON序列化的格式，不能直接传数据库模型对象
• jQuery加载：打开浏览器控制台（F12），确认没有$ is not defined这类报错
• CSRF令牌：生产环境去掉csrf_exempt，在表单内添加{% csrf_token %}，AJAX会自动携带令牌

测试方法 #

1. 打开浏览器开发者工具（F12），切换到Network标签
2. 提交表单，查看请求的状态码是否为200，Response里是否有正确的JSON数据
3. 若有错误，查看Console标签的报错信息，定位问题（比如路径错误、数据格式错误）

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