如何动态显示模式窗口并使用Flask发送数据 - javascript

我试图在用户单击哪个项目时动态插入模式窗口html代码，否则我将所有项目的模式窗口代码加载到html中。我在从Flask / Sql加载的模式窗口中也有一些输入，我想让用户更新它们中的任何一个，因此我需要在单击提交按钮时将数据发送回python。但是现在由于我的模态窗口太多（即使它们有单独的ID），我也找不到实现此目的的方法

这是我的代码：

route.py

@app.route('/viewApart', methods=['GET', 'POST'])
def viewApart():
  apts = []
  getApts = db.engine.execute("SELECT * FROM apartments")
  for a in getApts:
      apts.append((a))
  rooms = []
  getRooms = db.engine.execute("SELECT * FROM rooms")
  for r in getRooms:
      rooms.append((r))
  return render_template('apartments.html', title=_('Apartments'), apts=apts, rooms=rooms)

apartments.html

....
<section class="container">
<div class="row">
.. below some gallery code to show individual items from apts ..

{% for apt in apts %}
    <div class="col-md-3">
        <a href="javascript:void(0);" class="widget__v2 apt-widget rounded-corners box-shadow__v1 white" data-anchor="modalwindow" data-target="edit-apartment{{ apt[0] }}" id="apt{{ apt[0] }}">
            <div class="widget-header">
                <figure class="image h-180">
                    <img src="{{url_for('static', filename='_assets/img/apt/{{ apt[0] }}.jpg')}}" alt="" class="image__scaledown">
                </figure>

.. below model window ..

<div id="edit-apartment{{ apt[0] }}" class="modal large">
        <div class="modal-wrapper">
            <div class="modal-inner">
                <div class="modal-header">
                    <h3 class="title">{{ _('Edit Apartment') }}</h3>
                    <a href="javascript:void(0);" data-anchor="close-modal" class="modal-close-btn"></a>
                </div>
                <div class="modal-content">
                    <div class="row medium-gutter">
                        <div class="col-md-6">
                            <div class="row medium-gutter">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <div class="form-group-title clearfix">
                                            <label for="apt_display_name">{{ _('Display Name') }}</label>
                                            <div class="lh-24 text__default-grey pull-right" data-tooltip="true" data-tooltip-direction="up" data-multiline="true"
                                                 data-content="..">
                                                <i class="icofont-question-circle"></i>
                                            </div>
                                        </div>
                                        <input id="apt_display_name" type="text" class="form-control" value="{{ apt[1] }}">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="apt_number">{{ _('Apt. Number') }}</label>
                                        <input id="apt_number" type="text" class="form-control" value="{{ apt[2] }}">
                                    </div>
                                </div>
                            </div>
.. and so on...

.. and submit button ..
<a href="javascript:void(0);"id="btnSubmit">{{ _('Save Changes') }}</a>
</div>
</section>

现在即使有多个模型窗口，我也可以在模态窗口中显示当前数据，因此我想通过单击btnSubmit按钮实现此目的，我需要将所有输入值发送回python，以便我可以更新sql或插入新的sql 。请让我知道是否需要更多代码。

谢谢

参考方案

如果我正确地理解了您的问题，那么页面的基本框架将是这样的

<!DOCTYPE html>
<html>
<body>
<p>INTRODUCING MY AWESOME SITE AND 2 DIVS YOU CAN CLICK</p>

<div id="apt_1_modal">
  <input id="apt_1_text"></input>
  <a onclick="myFunction(event)">Submit</a>
</div>

<div id="apt_2_modal">
  <input id="apt_2_text"></input>
  <a onclick="myFunction(event)">Submit</a>
</div>

</body>
</html>

您将需要JavaScript来处理用户交互-脚本看起来像这样。您可以将此脚本直接附加到render_template输出，也可以将其作为文件附加。

该脚本将做两件事-首先捕获用户输入的内容，然后将数据发送到flask

<script>
function myFunction(e) {
//FIRST WE CAPTURE THE VALUE THAT THE USER INPUTS
let userInput = {toSend: e.currentTarget.previousElementSibling.value}

//THEN WE SEND IT TO THE FLASK BACKEND USING AJAX (Fetch API)
fetch("/api/path/to/flask/route", {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(userInput)
}
</script>

现在您需要一个可以处理userInput数据的函数

后端

from flask import Flask, request #import main Flask class and request object
@app.route('/api/path/to/flask/route', methods=['POST'])
def capture_userinput():
    req_data = request.get_json()
    recd_data = req_data['toSend']
    your_code_to_push_data_to_db(recd_data) #Depends on your ORM/DB

希望我给了您一个解决方法-您肯定会改变捕获userInput，调整fetch调用以及在flask api中发送/捕获其他数据的方式。

当<form>'.submit'函数被覆盖时(使用Ajax)将数据获取到php吗？ - javascript

我已覆盖此网页上表单的.submit函数，因为该网页已加载在“ index.php”中的#mainContent内，并且我希望“提交”按钮仅替换此#mainContent。我正在尝试将数据从此表单获取到.php文件，以便对数据库进行查询（或简单地回显已填充的变量，以指示已传递数据）。我是AJAX的新手。有人可以向我解释如何将数据传递到.php文件，或者指向要…

使用php重新加载内容 - javascript

在对网站进行编程时，我以前使用过此代码，它可以完美工作，但是现在当我想使用一些Flash部件时，每次单击链接时，它都会重新加载所有网站。源代码： <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables（jquery插件）中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是，如何获取单击添加付款按钮以添加付款的行的订单ID。其次，当点击addpayment时，它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段，并使其不可编辑或隐藏，但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值，然后选择输入 - javascript

通过$ _POST提交表单时，输入文件值仍然保留。像这样： if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

混合码错误 - javascript

好的，我在网站上为用户个人资料提供了一个基本的多合一页面，如下所示：<?php if($_GET['p']=='pb'){ echo '<p>pb</p>'; }elseif($_GET['p']=='example2'){ ec…

如何动态显示模式窗口并使用Flask发送数据 - javascript

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…