如何使用 request.get for Google App Engine 获取动态表单数据答案

【问题标题】：How to obtain dynamic form data using request.get for Google App Engine如何使用 request.get for Google App Engine 获取动态表单数据
【发布时间】：2018-07-06 12:21:42
【问题描述】：

我正在构建一个动态表单来捕获用户输入的货币对。例如，欧元/美元；瑞士法郎/美元等

我创建了一个动态表单供用户添加他们想要的货币对。表单看起来像这样（没有 CSS）：

在代码中，我用 JQuery 为第 n 个货币对创建一个名为 currency_n_1/currency_n_2 的名称。

形式为：

<form method="post" id="parentForm">
    <label>Please select your currency</label>
    <br>
    <div id="currency_1">
        <select name="currency_1_1" id="currency_1_1">
            <option>SGD</option>
            <option>CNY</option>
            <option>USD</option>
            <option>EUR</option>
        </select> 
        <select name="currency_1_2" id="currency_1_2">
            <option>SGD</option>
            <option>CNY</option>
            <option>USD</option>
            <option>EUR</option>
        </select> 
        <br>
    </div>
    <input type="button" id="add_button" value="Add Currency">
    <input type="button" value="remove" id="remove_button">
</form>

Jquery 是：

<script type="text/javascript">
$(document).ready(function() {
    console.log("JQ working")
    var index = 1;
    var index_1 = 2;
    var currency_pair = [];

    // Create a remove button
    var remove_1 = $('<input type="button" value="remove" id="remove_button">');

    $("#add_button").click(function(){
        console.log(index);
        var remove = $('<input />', {type:'button', value:'Remove',  id:'remove_'+index_1 });
        $("#currency_"+index).after($("#currency_"+index).clone().attr({"name":"currency_"+index_1, "id":"currency_"+index_1}));
        $("#currency_"+index_1).css("display","inline");
        $("#currency_"+index_1).children('#currency_'+index+'_1').attr({"name":"currency_"+index_1+"_1","id":"currency_"+index_1+"_1"});

        $("#currency_"+index_1).children('#currency_'+index+'_2').attr({"name":"currency_"+index_1+"_2","id":"currency_"+index_1+"_2"});
        $("#currency_"+index_1).children('#remove_'+index).attr({"name":"remove_"+index_1,"id":"remove_"+index_1});
        if (index==1) {
            console.log("noew index is 1")
            $("#currency_"+index_1 +"_2").after(remove);
        };
        index = index + 1;
        index_1 = index + 1;
        console.log(index);

        $("#remove_"+index).click(function(){
            //Remove the whole cloned div
            console.log("remove working")
            $(this).closest("div").remove();
        });
    });
});
</script>

所以每个货币对都有一个名称 currency_n_1 和 currency_n_2。

但我不知道如果只有一对货币，我应该如何使用 request.get 获取数据

    def post(self):
        user_currency_1_1 = self.request.get('currency_1_1')
        user_currency_1_2 = self.request.get('currency_1_2')

但我实际上不知道用户提交了多少对。那么如何确保用户提交这个动态表单时获得了所有的货币对呢？

【问题讨论】：

标签： jquery python forms google-app-engine webapp2

【解决方案1】：

我会为此使用react 或类似名称。但是你可以用普通的 javascript 来做。本质上，您在客户端网页中构建一个 JSON 对象，维护每个 npairs 的列表。使用 onchange 事件更新列表，然后更新它们出现的 DOM。所有工作都在客户端，在浏览器中完成。更清洁，因为您无需担心索引 ('#currency_' + index + '_1')。列表会自动排序。使用标准列表方法：push()、slice()、splice() 等和赋值来修改浏览器中的列表。

在提交时，您只需在请求中发送 JSON 对象，然后在后端循环通过它来执行您需要的任何操作。

【讨论】：