Django模板中AJAX返回结果无法显示的问题求助

问题描述 #

我是Django/AJAX新手，做了一个带搜索栏和复杂表格的页面，想通过AJAX实现无刷新搜索并在表格展示结果。目前AJAX请求能正常发送到视图，视图也能获取到目标数据，控制台可以看到返回的HTML数据，但页面上的表格字段是空的，实际没有内容显示。相关代码如下：

AJAX脚本 #

$(document).on('click', 'a.SearchResultItem', e=>{
    e.preventDefault();
    targetAuthorityId = e.target.parentElement.id

    $.ajax({
        type: 'POST',
        url: '../supremeWatchShowData/',
        data: {
            'csrfmiddlewaretoken': csrf,
            'authorityId': targetAuthorityId,
        },
        success: (res) =>{
            console.log(res)
        },
        error: (err)=>{
            console.log(err)
        }

    });
});

Django视图代码 #

def supremeWatchShowData(request):
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax: 
        authorityId = request.POST.get('authorityId')
        res = get_object_or_404(SourceData, id=authorityId)
        return render(request, 'ahromApp/supremeWatch.html', {'res': res})
    else:
        print("not an ajax request")

    return render(request, 'ahromApp/supremeWatch.html')

模板代码片段 #

<td>{{res.lprice}}</td>

解决方法 #

• 添加DOM更新逻辑
  目前AJAX仅在控制台打印返回结果，未将内容插入页面表格。修改success回调，把返回的HTML替换到表格对应的容器中（替换成你页面中实际的表格容器选择器）：

  success: (res) =>{
      $('#table-container').html(res);
  }
  

• 使用局部模板返回表格内容
  当前视图返回的是完整页面模板，会包含多余的页面结构（如页眉、导航），导致插入后页面混乱。建议创建局部模板仅存放表格相关内容：

  1. 新建supremeWatch_table.html局部模板：

     <td>{{res.lprice}}</td>
     <!-- 其他表格字段内容也放在这里 -->
     

  2. 修改视图返回该局部模板：

     return render(request, 'ahromApp/supremeWatch_table.html', {'res': res})
     

• 验证变量与字段正确性
  确认SourceData模型存在lprice字段，视图中res是有效的模型实例，模板中变量拼写无大小写或字符错误（Django模板变量区分大小写）。

• 修正AJAX请求URL路径
  相对路径../supremeWatchShowData/可能在不同页面层级下出错，建议用Django的{% url %}标签生成绝对路径：

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

  注意需在模板中渲染该脚本，或提前将URL存入全局变量。

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