生成动态内容：Django中实现无刷新页面更新的AJAX教程

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

def search_playerdb(request):
    if request.method == "POST":
        searched = request.POST['searched']
        # 假设 PlayerInfo 模型有 player_name 字段
        players = PlayerInfo.objects.filter(player_name__contains=searched)
    else:
        searched = ""
        players = [] # 初始化为空列表，避免未定义错误

    context = {
        'searched': searched, 
        'players': players
    }
    return render(request, 'search_db.html', context)

def display_match(request, matchid):
    """
    根据matchid查询比赛详情，并渲染match_details.html。
    这个视图将作为AJAX请求的目标。
    """
    match_players = PlayerInfo.objects.filter(match_id=matchid)
    winners = match_players.filter(win_or_loss=True)
    losers = match_players.filter(win_or_loss=False)
    context = {
        'match_id': matchid, # 传递match_id到模板，方便显示
        'match': match_players,
        'winners': winners,
        'losers': losers,
    }
    return render(request, 'match_details.html', context)

<!-- match_details.html (优化为局部内容) -->
<div class="match-details-card">
    <h3>比赛ID: {{ match_id }} 详情</h3>
    <h4>获胜队伍</h4>
    <ul>
        {% for player in winners %}
        <li>{{ player.name }} - {{ player.role }}</li>
        {% endfor %}
    </ul>
    <h4>落败队伍</h4>
    <ul>
        {% for player in losers %}
        <li>{{ player.name }} - {{ player.role }}</li>
        {% endfor %}
    </ul>
</div>

<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 %}
        <tr> 
            <td>
                <!-- 添加一个 class 以便 JS 选中 -->
                <a href="/match_details/{{player.match_id}}" 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; padding: 15px; border: 1px solid #ccc; background-color: #f9f9f9;">
    <p>点击上方表格中的比赛ID，在此处查看比赛详情。</p>
    <!-- 动态加载的比赛详情将显示在这里 -->
</div>

<!-- JavaScript 代码将放在这里 -->
<script>
    // JavaScript代码...
</script>

// 放在 search_db.html 的 <script> 标签内
document.addEventListener('DOMContentLoaded', function() {
    const matchDetailLinks = document.querySelectorAll('.match-detail-link');
    const detailsContainer = document.getElementById('match-details-container');

    matchDetailLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认的链接跳转行为

            const matchId = this.dataset.matchId; // 从 data-match-id 获取比赛ID
            const url = `/match_details/${matchId}`; // 构建请求URL

            // 显示加载状态
            detailsContainer.innerHTML = '<p>正在加载比赛详情...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/889">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175679988141722.png" alt="Riffo">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/889">Riffo</a>
                            <p>Riffo是一个免费的文件智能命名和管理工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Riffo">
                                <span>216</span>
                            </div>
                        </div>
                        <a href="/ai/889" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Riffo">
                        </a>
                    </div>
                ';

            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    return response.text(); // 获取响应的HTML文本
                })
                .then(html => {
                    detailsContainer.innerHTML = html; // 将HTML插入到容器中
                })
                .catch(error => {
                    console.error('加载比赛详情失败:', error);
                    detailsContainer.innerHTML = `<p style="color: red;">加载详情失败: ${error.message}</p>`;
                });
        });
    });
});

<!-- search_db.html 的底部 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    // jQuery 代码
    $(document).ready(function() {
        // 使用事件委托，确保对动态添加的元素也有效
        $(document).on('click', '.match-detail-link', function(event) {
            event.preventDefault(); // 阻止默认链接行为

            const matchId = $(this).data('match-id'); // 获取 data-match-id
            const url = `/match_details/${matchId}`; // 构建请求URL

            const detailsContainer = $('#match-details-container');
            detailsContainer.html('<p>正在加载比赛详情...</p>'); // 显示加载状态

            $.ajax({
                url: url,
                method: 'GET',
                success: function(response) {
                    detailsContainer.html(response); // 将响应的HTML插入到容器中
                },
                error: function(xhr, status, error) {
                    console.error('加载比赛详情失败:', error);
                    detailsContainer.html(`<p style="color: red;">加载详情失败: ${error}</p>`);
                }
            });
        });
    });
</script>