如何处理Django中的许多文本输入字段？

Question

我在我的简历网站上使用Django 3(仍然)。我正在编写一个Sudoku作为个人项目的示例，所以我在一个网格中有81个文本输入字段。我正试图找到在Django中处理多达81个输入的最不痛苦的方法，这样我就可以将输入传递给处理sudoku逻辑的Python函数。我将如何将用户输入输入到我的views.py中并处理所有这些输入？

我想取用户输入数字的任何单元格，通过我的Python函数对它们进行处理，然后将完整的拼图发送回单元格中。我对HTML中的表单和表单数据还没有很好的经验。这里是处理网格的HTML，以供参考。我知道我需要为输入字段添加最大文本长度，以确保用户每个单元格只能输入1位数字。

<section class="resume-section">
    <div class="d-lg-grid" id="grid">
        <div id="grid-1">
            <input type="text" size="3" id="cell1">
            <input type="text" size="3" id="cell10">
            <input type="text" size="3" id="cell19">
            <input type="text" size="3" id="cell28">
            <input type="text" size="3" id="cell37">
            <input type="text" size="3" id="cell46">
            <input type="text" size="3" id="cell55">
            <input type="text" size="3" id="cell64">
            <input type="text" size="3" id="cell73">
        </div>
        <div id="grid-2">
            <input type="text" size="3" id="cell2">
            <input type="text" size="3" id="cell11">
            <input type="text" size="3" id="cell20">
            <input type="text" size="3" id="cell29">
            <input type="text" size="3" id="cell38">
            <input type="text" size="3" id="cell47">
            <input type="text" size="3" id="cell56">
            <input type="text" size="3" id="cell65">
            <input type="text" size="3" id="cell74">
        </div>
        <div id="grid-3">
            <input type="text" size="3" id="cell3">
            <input type="text" size="3" id="cell12">
            <input type="text" size="3" id="cell21">
            <input type="text" size="3" id="cell30">
            <input type="text" size="3" id="cell39">
            <input type="text" size="3" id="cell48">
            <input type="text" size="3" id="cell57">
            <input type="text" size="3" id="cell66">
            <input type="text" size="3" id="cell75">
        </div>
        <div id="grid-4">
            <input type="text" size="3" id="cell4">
            <input type="text" size="3" id="cell13">
            <input type="text" size="3" id="cell22">
            <input type="text" size="3" id="cell31">
            <input type="text" size="3" id="cell40">
            <input type="text" size="3" id="cell49">
            <input type="text" size="3" id="cell58">
            <input type="text" size="3" id="cell67">
            <input type="text" size="3" id="cell76">
        </div>
        <div id="grid-5">
            <input type="text" size="3" id="cell5">
            <input type="text" size="3" id="cell14">
            <input type="text" size="3" id="cell23">
            <input type="text" size="3" id="cell32">
            <input type="text" size="3" id="cell41">
            <input type="text" size="3" id="cell50">
            <input type="text" size="3" id="cell59">
            <input type="text" size="3" id="cell68">
            <input type="text" size="3" id="cell77">
        </div>
        <div id="grid-6">
            <input type="text" size="3" id="cell6">
            <input type="text" size="3" id="cell15">
            <input type="text" size="3" id="cell24">
            <input type="text" size="3" id="cell33">
            <input type="text" size="3" id="cell42">
            <input type="text" size="3" id="cell51">
            <input type="text" size="3" id="cell60">
            <input type="text" size="3" id="cell69">
            <input type="text" size="3" id="cell78">
        </div>
        <div id="grid-7">
            <input type="text" size="3" id="cell7">
            <input type="text" size="3" id="cell16">
            <input type="text" size="3" id="cell25">
            <input type="text" size="3" id="cell34">
            <input type="text" size="3" id="cell43">
            <input type="text" size="3" id="cell52">
            <input type="text" size="3" id="cell61">
            <input type="text" size="3" id="cell70">
            <input type="text" size="3" id="cell79">
        </div>
        <div id="grid-8">
            <input type="text" size="3" id="cell8">
            <input type="text" size="3" id="cell17">
            <input type="text" size="3" id="cell26">
            <input type="text" size="3" id="cell35">
            <input type="text" size="3" id="cell44">
            <input type="text" size="3" id="cell53">
            <input type="text" size="3" id="cell62">
            <input type="text" size="3" id="cell71">
            <input type="text" size="3" id="cell80">
        </div>
        <div id="grid-9">
            <input type="text" size="3" id="cell9">
            <input type="text" size="3" id="cell18">
            <input type="text" size="3" id="cell27">
            <input type="text" size="3" id="cell36">
            <input type="text" size="3" id="cell45">
            <input type="text" size="3" id="cell54">
            <input type="text" size="3" id="cell63">
            <input type="text" size="3" id="cell72">
            <input type="text" size="3" id="cell81">
        </div>
    </div>
</section>

Answer 1

通过向name元素添加input属性来修改输入字段：

sudoku.html

<form method="POST">
{% csrf_token %}
...
<input type="text" size="3" id="cell1" name="grid">
...
</form>

views.py

def sudoku(request):
    grid = []
    if request.method == 'POST':
        grid = request.POST.getlist('grid')
    context = {'grid': grid}
    return render(request, 'sudoku.html' context=grid)

grid是由81个元素组成的列表。现在您可以使用form元素处理与简单HTML的交互，也可以使用ajax查询视图方法。