Django中如何实现HTML表格随用户输入动态更新内容并新增行

一、调整views.py逻辑 #

核心改动点：

• 用session持久化存储所有查询结果，实现每次查询累加新行
• 支持多hostname批量输入（支持逗号、空格作为分隔符）
• 新增异常捕获，避免无效域名解析报错

from django.shortcuts import render
import dns
import dns.resolver
import socket
import sys

def index(request):
    # 初始化查询结果列表
    if 'result_list' not in request.session:
        request.session['result_list'] = []
    
    if request.method == 'POST':
        search = request.POST.get('search', '').strip()
        if search:
            # 支持多域名分割：空格、逗号都可以作为分隔符
            host_list = [h.strip() for h in search.replace(' ', ',').split(',') if h.strip()]
            ip_resolver = dns.resolver.Resolver()
            
            for hostname in host_list:
                try:
                    ipv4 = ip_resolver.resolve(hostname, 'A').rrset[0].to_text()
                    ipv6 = ip_resolver.resolve(hostname, 'AAAA').rrset[0].to_text()
                    # 新结果追加到列表
                    request.session['result_list'].append({
                        'hostname': hostname,
                        'ipv4': ipv4,
                        'ipv6': ipv6,
                        'port1': '' # 端口逻辑可自行补充
                    })
                    # 标记session修改，确保存储生效
                    request.session.modified = True
                except Exception as e:
                    # 解析失败的域名可自行增加错误提示逻辑，此处直接跳过
                    pass
    
    return render(request, 'index.html', {"result_list": request.session['result_list']})

如果需要每次查询清空之前的结果，仅保留本次查询内容，把request.session['result_list'] = []放到POST判断逻辑的第一行即可。

二、修改index.html模板 #

核心改动点：

• 补全缺失的form表单标签，确保提交逻辑正常
• 用Django模板循环动态生成表格行，行数和查询的hostname数量完全对应

{% extends 'base.html' %}

{% block title %} IP Finder {% endblock %}

{% block body %}
<body>
<div>
    <!-- 补全form标签 -->
    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label>
                <input type="text" class="form-control" name="search" placeholder="输入域名，多个用逗号/空格分隔" autocomplete="off">
            </label>
            <input type="submit" class="btn btn-primary" value="搜索">
        </div>
    </form>

    <div>
        <div id="section2">
            <center>
            <table class = "a">
              <tr>
                <th>ID</th>
                <th>Hostname</th>
                <th>IP Address(IPv4)</th>
                <th>IP Address(IPv6)</th>
                <th>Port 1</th>
                <th>Port 2</th>
              </tr>
              <!-- 循环遍历结果列表，动态生成行 -->
              {% for item in result_list %}
              <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ item.hostname }}</td>
                <td>{{ item.ipv4 }}</td>
                <td>{{ item.ipv6 }}</td>
                <td>{{ item.port1 }}</td>
                <td></td>
              </tr>
              {% empty %}
              <!-- 无查询结果时的提示 -->
              <tr>
                <td colspan="6" style="text-align:center;">暂无查询结果</td>
              </tr>
              {% endfor %}
            </table>
            </center>
        </div>
    </div>
</div>
</body>
{% endblock %}

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