Django中利用AJAX实现动态加载页面内容

from django.shortcuts import render
# from .models import PlayerInfo # 假设 PlayerInfo 是你的模型

# 示例模型，实际项目中应从 models.py 导入
class PlayerInfo:
    def __init__(self, match_id, name, role, win_or_loss):
        self.match_id = match_id
        self.name = name
        self.role = role
        self.win_or_loss = win_or_loss

    @staticmethod
    def objects_filter(field, value):
        # 模拟数据库查询
        all_players = [
            PlayerInfo(1, 'PlayerA', 'Mid', True),
            PlayerInfo(1, 'PlayerB', 'Top', True),
            PlayerInfo(1, 'PlayerC', 'Jungle', True),
            PlayerInfo(1, 'PlayerD', 'ADC', True),
            PlayerInfo(1, 'PlayerE', 'Support', True),
            PlayerInfo(1, 'PlayerF', 'Mid', False),
            PlayerInfo(1, 'PlayerG', 'Top', False),
            PlayerInfo(1, 'PlayerH', 'Jungle', False),
            PlayerInfo(1, 'PlayerI', 'ADC', False),
            PlayerInfo(1, 'PlayerJ', 'Support', False),
            PlayerInfo(2, 'PlayerK', 'Mid', True),
            PlayerInfo(2, 'PlayerL', 'Top', True),
            # ... 更多数据
        ]
        if field == 'player_name__contains':
            return [p for p in all_players if value.lower() in p.name.lower()]
        elif field == 'match_id':
            return [p for p in all_players if p.match_id == value]
        elif field == 'win_or_loss':
            return [p for p in all_players if p.win_or_loss == value]
        return []

def search_playerdb(request):
    searched = ""
    players = []
    if request.method == "POST":
        searched = request.POST.get('searched', '')
        # 实际项目中应使用 PlayerInfo.objects.filter(player_name__contains=searched)
        players = PlayerInfo.objects_filter(field='player_name__contains', value=searched)
    context = {
        'searched': searched,
        'players': players
    }
    return render(request, 'searchdb.html', context)

def display_match(request, matchid):
    # 实际项目中应使用 PlayerInfo.objects.filter(match_id=matchid)
    match_players = PlayerInfo.objects_filter(field='match_id', value=matchid)
    winners = [p for p in match_players if p.win_or_loss] # 假设 win_or_loss=True 为胜者
    losers = [p for p in match_players if not p.win_or_loss] # 假设 win_or_loss=False 为败者

    context = {
        'match': match_players,
        'winners': winners,
        'losers': losers,
    }
    # 注意：match_details.html 应设计为可独立加载的HTML片段，
    # 或者其内容在一个 block 中，以便只加载该 block 的内容。
    return render(request, 'match_details.html', context)

# 例如，在你的应用目录下的 urls.py
from django.urls import path
from . import views

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

<h1>Search Results for: {{searched}}</h1>
<table border="1">
    <thead>
        <tr>
            <th>比赛ID</th>
            <th>玩家名称</th>
            <th>角色</th>
            <th>胜负</th>
        </tr>
    </thead>
    <tbody>
        {% for player in players %} {# 注意这里是 players 而不是 match #}
        <tr>
            <td>
                <!-- 关键修改：使用 data-match-id 存储比赛ID，并阻止默认链接行为 -->
                <a href="#" class="match-detail-link" data-match-id="{{ player.match_id }}">
                    {{ player.match_id }}
                </a>
            </td>
            <td>{{ player.name }}</td>
            <td>{{ player.role }}</td>
            <td>{{ player.win_or_loss }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 添加一个容器，用于动态加载比赛详情 -->
<div id="match-details-container" style="margin-top: 20px; border: 1px solid #ccc; padding: 15px;">
    <!-- 比赛详情将在这里加载 -->
    <p>点击上方比赛ID链接查看详情。</p>
</div>

<script>
    // 确保DOM完全加载后再执行JavaScript
    document.addEventListener('DOMContentLoaded', function() {
        // 选中所有带有 'match-detail-link' 类的链接
        const detailLinks = document.querySelectorAll('.match-detail-link');
        const detailsContainer = document.getElementById('match-details-container');

        // 为每个链接添加点击事件监听器
        detailLinks.forEach(link => {
            link.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止链接的默认跳转行为

                const matchId = this.dataset.matchId; // 从 data-match-id 属性获取比赛ID
                // 构造AJAX请求的URL
                // 注意：这里假设你的 Django URL 配置是 /display_match/<int:matchid>/
                const url = `/display_match/${matchId}/`;

                // 可选：显示加载提示
                detailsContainer.innerHTML = '<p>正在加载比赛详情，请稍候...</p>';
                detailsContainer.style.backgroundColor = '#f0f0f0';

                // 使用 Fetch API 发起AJAX请求
                fetch(url)
                    .then(response => {
                        // 检查HTTP响应状态码
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.text(); // 获取响应内容为文本（HTML）
                    })
                    .then(html => {
                        // 将获取到的HTML内容插入到指定容器
                        detailsContainer.innerHTML = html;
                        detailsContainer.style.backgroundColor = '#fff'; // 恢复背景色
                    })
                    .catch(error => {
                        // 处理请求或网络错误
                        console.error('加载比赛详情时发生错误:', error);
                        detailsContainer.innerHTML = '<p style="color: red;">加载失败，请检查网络或稍后再试。</p>';
                        detailsContainer.style.backgroundColor = '#ffe0e0';
                    });
            });
        });
    });
</script>

{% comment %}
    此模板假定为仅包含所需内容的片段，
    或通过 {% block stats %} 机制被父模板加载。
    如果它本身扩展了 base.html，那么 AJAX 请求会加载整个页面，
    这可能不是理想情况。最佳实践是为 AJAX 响应创建一个轻量级模板片段。
{% endcomment %}

{% block stats %}
<body>
    <h2>比赛ID: {{ match.0.match_id }} 详情</h2>
    <h3>获胜队伍</h3>
    <ul>
        {% for player in winners %}
        <li>
            {{ player.name }} ({{ player.role }})
        </li>
        {% endfor %}
    </ul>
    <h3>失败队伍</h3>
    <ul>
        {% for player in losers %}
        <li>
            {{ player.name }} ({{ player.role }})
        </li>
    {% endfor %}
 </body>
{% endblock %}