如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据

Posted

技术标签:

【中文标题】如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据【英文标题】:How to get python to retrieve user-inputted data from a dynamic table using Flask & JINJA2 【发布时间】:2018-12-30 07:37:41 【问题描述】:

我正在构建一个 Flask 应用程序,其中包含一个表格,用户可以在其中更改单元格并“应用”这些更改,例如在数据库中更新。

图片如下

我在让烧瓶检索已通过表单提交的数据时遇到问题。

行数是动态的,取决于列表中 Id 的数量。

这是我的 html -- 很抱歉,我还在学习。

                            <tbody> 
                            <form method="post" name="productCost">
                        % for n in range(name_list | length) %
                            <tr> 
                                <th scope="row" >name_list[n]</th> 
                                <td>ID_list[n]</td> 
                                <td id="costn">$cost_list[n]</td> 
                                <td>---</td>
                                <td id="changesn"><button onclick="costChangesn()">Edit</button></td> 
                            </tr> 
                        <script>
                            function costChangesn() 
                                document.getElementById("costn").innerHTML = "<input placeholder='cost_list[n]' name=ID_list[n]>";
                                document.getElementById("changesn").innerHTML = "<button onclick='applyChangesn()' type='submit'>Apply</button><button onclick='cancelChangesn()'>Cancel</button>";

                            
                            function applyChangesn() 
                                docuemnt.getElementById("costn").innerHTML = document.forms["productCost"]["ID_list[n]"]
                            
                            function cancelChangesn() 
                                document.getElementById("costn").innerHTML = "cost_list[n]";
                                document.getElementById("changesn").innerHTML = "<button onclick='costChangesn()'>Edit</button>";

                            
                        </script>
                        %endfor%
                    </form>
                        </tbody>

这是我的 python/flask 代码:

app.route('/expenses', methods=['GET', 'POST'])
def expenses():
    if 'email' not in session:
        return redirect(url_for('login_now'))

    list_of_product_dicts = get_name_id()
    name_list = []
    asin_list =[]
    cost_list=[]
    for p in list_of_product_dicts:
        name_list.append(p['name'])
        id_list.append(p['id'])
        cost = get_landing_cost(p['id'])
        cost_list.append(cost)

    if request.method == 'POST':
            print(request.form['name']) 
    return flask.render_template('expenses.html', name_list = name_list, id_list=id_list,
        cost_list=cost_list)

我需要 python 来识别所做的更改并将其存储在变量中。这是为了在数据库中更新它——但我不需要数据库代码的帮助。我只需要帮助让 python 抓取已更改的单元格并识别它所在的行。

【问题讨论】:

【参考方案1】:

jqueryajax 一起使用会更简单一些。后者使您能够通过与后端脚本通信来更新数据库来动态更新表。

首先,创建 HTML 脚本(下面的代码为本示例创建了不同的表格布局,但是,您可以根据下面的代码替换您自己的)。 jquery 干净利落地处理 Apply、Cancel 和 Edit 按钮功能,并通过ajax 与后端通信:

tables.html

<html>
  <body>
   <table>
   <tr>
     <th>ID</th>
     <th>Cost</th>
     <th>Effective Date</th>
     <th>Make Changes</th>
   </tr>
  %for row in data%
  <tr>
    <td>row.id</td>
    <td class='costrow.rowid'>row.price</td>
    <td>row.date</td>
    <td>
      <div id='optionsrow.rowid'>
        <button id='mutaterow.rowid'>Edit</button>
      </div>
    <td>
  </tr>
  %endfor%
 </table>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() 
  $("div[id^='options']").on('click', 'button', function()
   var the_id = this.id.match('\\d+');
   var the_type = this.id.match('[a-zA-Z]+');
   if (the_type == "mutate")
    $('#options'+the_id).html('<button id="cancel'+the_id+'">Cancel</button>\n<button id="apply'+the_id+'">Apply</button>');
    var current_cost = $('.cost'+the_id).text();
    $('.cost'+the_id).html('\n<input type="text" class="newval'+the_id+'" value="'+current_cost+'">')
   
   else if (the_type == 'cancel')
    $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
   
   else
    var value = $(".newval"+the_id).val();
    $.ajax(
          url: "/update_cell",
          type: "get",
          data: newval: value, rowid:the_id,
          success: function(response) 
            $('.cost'+the_id).html(value);
            $('#options'+the_id).html('<button id="mutate'+the_id+'">Edit</button>');
          ,
          error: function(xhr) 
            //Do Something to handle error
          
       );
     
   );
 );
 </script>
</html>

然后,创建应用和路由:

import flask, sqlite3, collections
app = flask.Flask(__name__)

@app.route('/', methods=['GET'])
def home():
  dummy_data = [['hvVlNnAW', '$6.00', '--'], ['UqBzqLho', '$10.00', '--'], ['tuEdqldI', '$3.00', '--'], ['MIHLFWDS', '$1.00', '--'], ['rUnjpHiJ', '$8.00', '--'], ['lHVHxgZF', '$1.00', '--'], ['nFfaHkHj', '$3.00', '--'], ['rRWqXqVh', '$8.00', '--'], ['rdzCRozr', '$4.00', '--'], ['MGojGbtW', '$9.00', '--']]
  #substitute dummy_data with a database query
  product = collections.namedtuple('product', ['id', 'price', 'date', 'rowid'])
  return flask.render_template('tables.html', data = [product(*a, i) for i, a in enumerate(dummy_data, 1)])

@app.route('/update_cell')
def update_row():
   new_val = flask.request.args.get('newval')
   prod_id = int(flask.request.args.get('rowid[]'))
   #commit new_val to database
   return flask.jsonify('success':True)

现在,在'/update_cell' 中,您有了新的价格值和产品行 ID,它告诉您要更新哪个 sqlite 行的价格。请注意,在home 中,由enumerate 获取的行ID 对应用程序至关重要,因为它使jquery 能够知道要更新哪些表和sqlite 行。

演示:

【讨论】:

以上是关于如何让 python 使用 Flask 和 JINJA2 从动态表中检索用户输入的数据的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Flask 和 HTML 从 python 列表创建下拉菜单

如何使用flask将javascript数组传递给python脚本[使用flask示例]

python中flask如何降低内存?

你如何使用 Flask-Login 和自定义 Python 装饰器来分配用户权限?

Flask结合ECharts实现在线可视化效果,超级详细!

如何使用 Python 和 Flask 获取请求变量的值 [重复]