Django实现点击链接局部加载比赛详情，避免页面跳转

我是Django与Web开发新手，现有一个玩家姓名搜索页面，搜索返回的表格每条记录对应玩家单场比赛表现，每场比赛关联10名玩家。目前点击表格中的match_id会跳转至新页面展示比赛详情，希望修改为点击后将详情加载到当前页面的表格下方。

现有代码 #

1. search_db.html 模板 #

<h1>Search Results for: {{searched}}</h1>
<table>
    {% for player in match %}
    <tr> 
        <td>
          <a href=search_player_db/{{player.match_id}}>{{player.match_id}}</a> 
        </td>
        <td>{{ player.name}}</td>
        <td>{{ player.role}}</td>
        <td>{{ player.win_or_loss}}</td>
    </tr>
    {% endfor %}
</table> 
{{IM TRYING TO GENERATE DATA HERE}}

2. match_details.html 模板 #

{%block stats%}
<body>
    <h1>Winning team</h1>
        {%for player in winners %}
        <li>
            {{player.name}}
            {{player.role}}
            </li>
        {%endfor%}
    <h1>Losing team</h1>
        {%for player in losers %}
        <li>
            {{player.name}}
            {{player.role}}
            </li>
    {%endfor%}
 </body>
{%endblock%}

3. views.py 视图代码 #

def search_playerdb(request):
    if request.method == "POST":
        searched = request.POST['searched']
        players = PlayerInfo.objects.filter(player_name__contains=searched)
    context={
        'searched': searched, 
        'players': players}
        return render(request, 'searchdb.html', context)

    else:
        return render(request, 'searchdb.html', {})

def display_match(request, matchid):
    match = PlayerInfo.objects.filter(match_id=matchid)
    winners = match.filter(win_or_loss=True)
    losers = match.filter(win_or_loss=False)
    context = {
        'match': match,
        'winners': winners,
        'losers': losers,}
    return render(request, 'match_details.html', context)

修改方案 #

步骤1：调整比赛详情模板（适配嵌入场景） #

去掉match_details.html中的<body>标签，只保留内容片段，避免破坏当前页面结构：

{%block stats%}
<h1>Winning team</h1>
<ul>
    {%for player in winners %}
    <li>{{player.name}} - {{player.role}}</li>
    {%endfor%}
</ul>
<h1>Losing team</h1>
<ul>
    {%for player in losers %}
    <li>{{player.name}} - {{player.role}}</li>
    {%endfor%}
</ul>
{%endblock%}

步骤2：修改视图，返回HTML片段 #

更新display_match视图，直接返回渲染后的详情片段，而非完整页面：

from django.template.loader import render_to_string
from django.http import HttpResponse

def display_match(request, matchid):
    match = PlayerInfo.objects.filter(match_id=matchid)
    winners = match.filter(win_or_loss=True)
    losers = match.filter(win_or_loss=False)
    context = {
        'winners': winners,
        'losers': losers,}
    # 渲染为HTML字符串并返回
    html_fragment = render_to_string('match_details.html', context)
    return HttpResponse(html_fragment)

步骤3：修改搜索结果页面，添加异步加载逻辑 #

将原<a>标签改为可点击的文本元素，通过JavaScript的fetch API实现异步请求，并将结果插入到页面指定容器：

<h1>Search Results for: {{searched}}</h1>
<table>
    {% for player in players %}
    <tr> 
        <td>
          <!-- 用span替代a标签，添加数据属性存储match_id -->
          <span class="match-link" data-match-id="{{player.match_id}}" style="color: blue; text-decoration: underline; cursor: pointer;">{{player.match_id}}</span> 
        </td>
        <td>{{ player.name}}</td>
        <td>{{ player.role}}</td>
        <td>{{ player.win_or_loss}}</td>
    </tr>
    {% endfor %}
</table> 
<!-- 用于展示比赛详情的容器 -->
<div id="match-details-container"></div>

<script>
const matchLinks = document.querySelectorAll('.match-link');
const detailsContainer = document.getElementById('match-details-container');

matchLinks.forEach(link => {
    link.addEventListener('click', function() {
        const matchId = this.dataset.matchId;
        // 发送异步请求获取详情
        fetch(`/search_player_db/${matchId}/`)
            .then(response => response.text())
            .then(html => {
                // 将返回的HTML插入容器
                detailsContainer.innerHTML = html;
            })
            .catch(() => {
                detailsContainer.innerHTML = '<p>加载比赛详情失败，请重试</p>';
            });
    });
});
</script>

步骤4：确认URL配置正确 #

确保urls.py中display_match的路由配置无误：

from django.urls import path
from . import views

urlpatterns = [
    path('search_playerdb/', views.search_playerdb, name='search_playerdb'),
    path('search_player_db/<int:matchid>/', views.display_match, name='display_match'),
]

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