在 html 按钮上调用 python 函数单击烧瓶答案

【问题标题】：call python function on a html button click in flask在 html 按钮上调用 python 函数单击烧瓶
【发布时间】：2021-10-17 22:33:39
【问题描述】：

我已经编写了一个示例代码，我想通过在烧瓶中单击一个 html 按钮来调用在 python 文件（不是页面，只是函数）中定义的 python 函数。请帮助我找到正确的方法。

下面是我在 base.html 中编写的用于触发按钮单击操作的 jquery 脚本。 button_click() 是 routes.py 中定义的函数，我想在单击按钮时调用它。

    <script>
        $('#btn-click').on('click', function(e) {
            {{button_click()}}
        });       
    </script>

下面是整个代码示例

main.py

from Website import create_app

app = create_app()

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

init.py（下划线不可见）

from flask import Flask
from .routes import routes

def create_app():
    app = Flask(__name__)    
        #..........................Register blueprint.......................#
    app.register_blueprint(routes, url_prefix='/')
    
    return app

base.html

<!DOCTYPE html>
<html lang="english">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href={{url_for('static', filename='images/logo1.png')}}>

    <title>{% block title%}{% endblock %}</title>

    <!-- Bootstrap CSS CDN -->    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <!-- Bootstrap icons css -->
    <link rel="stylesheet" href={{url_for('static', filename='bootstrap-icons/bootstrap-icons.css')}}>

    <!-- Font Awesome JS (icons) -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

    <!-- Our Custom CSS -->
    <link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>

</head>

<body>

    <!--............................Home page navbar................................-->
    <div class="container-fluid">
        <nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">  
            <a class="navbar-brand" href="/">
                <!-- Add logo -->
                <img src={{url_for('static', filename='images/logo1')}} alt="logo">
            </a>
            
            <button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
                    data-toggle="collapse" 
                    data-target="#navbarResponsive"
                    aria-controls="navbarResponsive" 
                    aria-expanded="true" 
                    aria-label="Toggle navigation"
                    id="togglerButton">
                    
                    <span class="line"></span> 
                    <span class="line"></span> 
                    <span class="line" style="margin-bottom: 0;"></span>
            </button>
    
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">                        
                        <a class="nav-link" href="/"><i class="fas fa-home"></i> Home</a>
                    </li>
                </ul>
            </div> 

            <form class="lg-flex">  

            <!-- Button to call function -->
                <button type="button" name='signin-btn' class="btn buttonCustom" id='btn-click'>Click Me</button>
            </form>
        </nav>    
    </div>

    <!--...............Home content.......................--> 
    {% block navPages%}{% endblock%}

    <!-- javascript to enable bootstrap usage -->    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

    <script>
        $('#btn-click').on('click', function(e) {
            {{button_click()}}
        });       
    </script>

</body>
</html>

home.html

{% extends 'base.html'%}

{% block title %}Home{% endblock %}

{% block navPages%}
    <h1> Home Page! </h1>
{% endblock%}

【问题讨论】：

你可以为你想调用的api-func这样的函数定义路径，然后使用js中的fetch或者你可以在jquery中使用xhr来调用api-func的url路径
你能给我看一个代码sn-p我怎么能做到这一点

标签： python html jquery flask

【解决方案1】：

Python 在服务器端执行。 JS 用于客户端。您不能从 JS 调用 Python 代码。您需要对 Flask 中定义的路由进行（异步？）HTTP 调用。您可以查看我对 post 的回复，了解如何在 JQuery 中使用 ajax。

【讨论】：

【解决方案2】：

你需要向flask发送ajax请求。

$(function(){
    $('button').click(function(){
        var user = $('#inputUsername').val();
        var pass = $('#inputPassword').val();
        $.ajax({
            url: '/signUpUser',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response){
                console.log(response);
            },
            error: function(error){
                console.log(error);
            }
        });
    });
});

Flask 的路线

from flask import Flask,render_template, request,json

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello World!"

@app.route('/signUp')
def signUp():
    return render_template('signUp.html')

@app.route('/signUpUser', methods=['POST'])
def signUpUser():
    user =  request.form['username'];
    password = request.form['password'];
    return json.dumps({'status':'OK','user':user,'pass':password});

if __name__=="__main__":
    app.run()

您可以参考此教程。 https://www.bogotobogo.com/python/Flask/Python_Flask_with_AJAX_JQuery.php

【讨论】：

【解决方案3】：

<button class="btn btn-primary btn-xs center-block" onclick="insrow({{patient_data[0]}})">Add</button>

使用 javascript

<script>
function insrow(patient_id){
    var diagname = prompt("Please enter test name", "");
    if(diagname != null){
    fetch('/adddiags/'+patient_id+'/'+ diagname).then(function(response){
            response.json().then(function(data){
                if(!("error" in data)){
            console.log(data);
            var tabbody = document.getElementById('diagtbody');
            var newrow = tabbody.insertRow(tabbody.rows.length);
            var newcell1 = newrow.insertCell(0);
            var newcell2 = newrow.insertCell(1);
            var newtext1 = document.createTextNode(data.testname);
            var newtext2 = document.createTextNode(data.price);
            newcell1.appendChild(newtext1);
            newcell2.appendChild(newtext2);
        }else{
                alert(data.error);
                }
           })
       })
   }
}
</script>

这在你的 html 中作为脚本

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/adddiags/<int:patient_id>/<diag_name>')
def adddiags(patient_id=0, diag_name=''):
    if patient_id:
        # fetching some information from db
        sql = text("select diagnostics_id, test_name, charge from diagnostics where test_name = :x")
        rslt = db.engine.execute(sql, x=diag_name)
        diag_data = list(rslt)
        if diag_data:
            diagnostics_id = diag_data[0][0]
            testname = diag_data[0][1]
            charge = diag_data[0][2]
            data = {"testname": testname, "price": charge}
            return jsonify(data)
        else:
            return jsonify({"error": "diagnostic test doesnt exist"})
    else:
        return redirect(url_for('diagnostics'))

在您的烧瓶应用程序中，您必须编写路径和数据库相关逻辑。一旦你从 db 接收到数据转换为 json 以便 javascript 能够处理它，我在这里将相同的数据从 api 更新到 html 表。希望这个例子能提供清晰的信息。

【讨论】：