如何使用Jquery与Flask实现动态生成多输入框的内容读取打印

现有代码核心错误点 #

• 变量i作用域冲突：click事件内重复声明var i，导致全局计数变量被局部变量覆盖，计数逻辑失效
• name属性未正确拼接变量：直接写name="(i)"会将i识别为普通字符串，生成的name固定为(i)而非递增数字
• id属性重复：所有动态生成的textarea使用相同id，违反DOM规范
• 提交时取值逻辑硬编码：仅写死获取name为1、2的textarea内容，生成更多输入框时无法适配

修正后的完整代码 #

HTML-JavaScript部分（InsertarFlask3.html） #

<script type="text/javascript">
// 全局计数变量，注意不要在局部作用域重复声明
var textareaCount = 0;

$(document).ready(function(){
    $("#der-iz").click(function(){
        // 直接修改全局计数变量，不要加var重复声明
        textareaCount = textareaCount + 1;
        // 正确拼接变量到name属性，同时id也加上计数避免重复
        $('#Entradas').append(`<textarea type="text" id="name_${textareaCount}" name="dynamic_${textareaCount}" placeholder="Type your message"></textarea>`);
        $('#Entradas').append("<br>");  
    })

    $("#ab-ar").click(function(){
        $('#Entradas').append('<input type="text" id="name2" name="message2" placeholder="Type your message">');
        $('#Entradas').append("<br>");
    })

    $('a#process_input').bind('click', function() {
        // 批量获取所有动态生成的textarea内容，不需要硬编码逐个取
        let dynamicValues = [];
        $('textarea[name^="dynamic_"]').each(function(){
            dynamicValues.push($(this).val());
        });
        // 获取固定name的输入框内容
        let fixedValue = $('input[name="message2"]').val();
        
        $.getJSON('/background_process', {
            dynamic_content: JSON.stringify(dynamicValues),
            message2: fixedValue
        }, function(data) {
            $("#result").empty();
            // 遍历打印所有动态输入框内容
            data.dynamic_result.forEach((val, index) => {
                $("#result").append(`动态输入框${index+1}内容：${val}<br>`);
            });
            // 打印固定输入框内容
            $("#result").append(`固定输入框内容：${data.fixed_result}`);
        });
        return false;
    });
});
</script>

<body>
    <form>
        <div id="Entradas"></div>
        <br>
        <a href=# id=process_input><button class='btn btn-default'>Send</button></a>
    </form>
                    
    <p>
        <label>
            <input type="radio" name="filaint" id="der-iz" value="der-iz" >Right-Left
        </label>
        <label>
            <input type="radio" name="filaint" id="ab-ar" value="ab-ar" >Down-Up
        </label>
    </p>
    <br>
    <div id=result></div>
</body>

Flask部分 #

from flask import Flask, render_template, request, jsonify
import json

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("InsertarFlask3.html")

@app.route("/background_process")
def background_process():
    # 解析动态输入框内容
    dynamic_str = request.args.get('dynamic_content', '[]')
    dynamic_list = json.loads(dynamic_str)
    # 获取固定输入框内容
    fixed_content = request.args.get('message2', '')
    return jsonify({
        'dynamic_result': dynamic_list,
        'fixed_result': fixed_content
    })

if __name__ == '__main__':
    app.run(debug=True)

优化说明 #

• 不再硬编码逐个获取动态输入框内容，不管生成多少个都可以自动全部读取
• 修复了变量作用域和属性拼接错误，name属性可以正常递增
• 避免了DOM id重复的问题，符合规范

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