如何调用模态窗口，从数据库获取数据，在窗口中显示，根据用户的请求保存更改

问题描述 投票：0回答：1

我在我的项目中使用flask和psycopg2。 有一个页面“付款列表”，该表包含付款列表，经理希望查看卡并能够通过单击付款来编辑数据。 通过点击付款名称，您需要打开一个模态窗口，向数据库发出请求，并使用html窗口模板在模态窗口中显示有关付款的信息 对我来说，这个任务很困难，我把它分成了子任务。

  1. 我能够在没有 html 标记的情况下使用实际支付数据调用模式窗口 但我无法加载html模板，因此我无法测试如何将更改后的数据写回数据库。

我的用于显示没有标记的模式窗口的脚本

<script>
     // Function to send data to the Flask route
     function sendData() {
         var data = 'your_data_here';

         // Send an AJAX POST request to the Flask route
         $.ajax({
             url: '/get_modal_payment',
             method: 'GET',
             dataType: 'json'
             })
         .done(function(response) {
             // Create a new modal element
             var modal = $('<div id="myModal" class="modal">');

             // Create the modal content
             var modalContent = $('<div class="modal-content">');

             // Add the response data to the modal content
             modalContent.append($('<p>').text('Response: ' + response));

             // Append the modal content to the modal
             modal append(modalContent);

             // Append the modal to the body
             $('body').append(modal);

             // Display the modal
             modal show();
           })
         .fail(function() {
             // Handle any error that occurred during the Ajax request
             console.log('Error occurred');
         });

     }
</script>

所以我尝试根据html模板显示模式窗口

<script>
     getModal() {
         $.ajax({
             url: '/open_modal',
             type: 'GET',
             success: function(response) {
                 $('#modalContent').html(response.modal_content);
                 $('#myModal').modal('show');
             };
         });
     }
</script>

url：Python 中的“/open_modal”

@payment_app_bp.route('/open_modal', methods=['GET'])
def open_modal():
     modal_content = render_template('application_modal.html')
     return jsonify(modal_content=json.dumps(modal_content))

application_modal.html

<h1>Modal Window Content</h1>
<p>This is the content of the modal window.</p>

我遇到的错误

Traceback (most recent call last):
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 2213, in __call__
    return self.wsgi_app(environ, start_response)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 2193, in wsgi_app
    response = self.handle_exception(e)
               ^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 2190, in wsgi_app
    response = self.full_dispatch_request()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 1486, in full_dispatch_request
    rv = self.handle_user_exception(e)
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 1484, in full_dispatch_request
    rv = self.dispatch_request()
         ^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\app.py", line 1469, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\payment_app.py", line 1752, in open_modal
    modal_content = render_template('application_modal.html')
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\templating.py", line 151, in render_template
    return _render(app, template, context)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\templating.py", line 132, in _render
    rv = template.render(context)
         ^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\jinja2\environment.py", line 1301, in render
    self.environment.handle_exception()
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\jinja2\environment.py", line 936, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "C:\Users\user\PycharmProjects\kpln\templates\application_modal.html", line 21, in top-level template code
    <!--&lt;!&ndash;    var data = JSON.parse('{{ data | tojson | safe }}');&ndash;&gt;-->
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\jinja2\filters.py", line 1688, in do_tojson
    return htmlsafe_json_dumps(value, dumps=dumps, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\jinja2\utils.py", line 658, in htmlsafe_json_dumps
    dumps(obj, **kwargs)
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\json\provider.py", line 180, in dumps
    return json.dumps(obj, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\AppData\Local\Programs\Python\Python311\Lib\json\__init__.py", line 238, in dumps
    **kw).encode(obj)
          ^^^^^^^^^^^
  File "C:\Users\user\AppData\Local\Programs\Python\Python311\Lib\json\encoder.py", line 200, in encode
    chunks = self.iterencode(o, _one_shot=True)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\user\AppData\Local\Programs\Python\Python311\Lib\json\encoder.py", line 258, in iterencode
    return _iterencode(o, 0)
           ^^^^^^^^^^^^^^^^^
  File "C:\Users\user\PycharmProjects\kpln\venv\Lib\site-packages\flask\json\provider.py", line 120, in _default
    raise TypeError(f"Object of type {type(o).__name__} is not JSON serializable")
TypeError: Object of type Undefined is not JSON serializable

如何调用模态窗口，从数据库获取数据，将其显示在窗口中，根据用户的请求保存更改。它不会重新加载页面。

javascript python ajax flask
1个回答
0
投票

不需要JSON格式的传输。
要从服务器获取呈现的模板并将其添加到模式窗口，请指定您期望从服务器获得的数据类型。在这种情况下，您期望得到 text/html 类型的响应，因此需要分配 

html
。

<script>
    function getModal() {
        $.ajax({
            url: '/open_modal',
            type: 'GET',
            dataType: 'html'
        }).then(data => {
            $('#myModal .modal-content').html(data);
            $('#myModal').modal('show');
        });
    }
</script>

@payment_app_bp.route('/open_modal')
def open_modal():
    # Get your data from the database and pass it on to the template.
    # ...
    return render_template('application_modal.html', **locals())
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.