如何将字符串从HTML传递到Python，再传递回HTML

小编典典

如何将字符串从HTML传递到Python，再传递回HTML

ajax

背景：

我创建了一个非常简单的前端，用户可以在其中输入字符串。输入并单击“检查”按钮后，我想将此字符串作为JSON传递给python字符串，它将在其中进行SQL查找。根据SQL外观，python脚本应传递一个布尔值，该值应更改？到✔或✘。

题：

一旦按下“检查”按钮作为JSON到Python脚本，然后如何将字符串从Python传递到HTML，将？更改为✔或✘，如何传递字符串？

研究：

    <!DOCTYPE html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

    body {font-family: Arial, Helvetica, sans-serif;}

    * {box-sizing: border-box;}



    input[type=text], select, textarea {

      width: 100%;

      padding: 12px;

      border: 1px solid #ccc;

      border-radius: 4px;

      box-sizing: border-box;

      margin-top: 6px;

      margin-bottom: 16px;

      resize: vertical;

    }



    input[type=submit] {

      background-color: #4CAF50;

      color: white;

      padding: 12px 20px;

      border: none;

      border-radius: 4px;

      cursor: pointer;

    }



    input[type=submit]:hover {

      background-color: #45a049;

    }



    .container {

      border-radius: 5px;

      background-color: #f2f2f2;

      padding: 20px;

    }





      h3 {text-align: center;}

      .center {

                display: flex;

                justify-content: center;

                align-items: center;

                }

        </style>



    </style>

    </head>

    <body>



    <h3>My Request</h3>



    <div class="container">

      <form action="/action_page.php">



    <label for="account_name">? Account Name:</label>

    <input type="text" id="fname" name="firstname" placeholder="Account Name..">

    <input type="submit" value="Check Account"><br><br>



    <label for="contact_name">? Contact Name:</label>

    <input type="text" id="lname" name="lastname" placeholder="Contact Name..">

    <input type="submit" value="Check Contact"><br><br>





    <label for="reseller">? Reseller:</label>

    <input type="text" id="lname" name="lastname" placeholder="Reseller..">

    <input type="submit" value="Check Reseller"><br><br>



    <label for="issue_date">? Issue Date:</label><br>

    <input type="date" id="start" name="trip-start" value="" min="2018-01-01" max="2100-12-31">





    <br>

    <div class="center">

        <input type="submit" value="VERIFY ALL">

    </div>

      </form>

    </div>



    </body>

    </html>

阅读 277

2020-07-26

共1个答案

小编典典

这只是一个示例代码，它将使您了解如何将值从客户端传递到服务器以及从服务器传递到客户端。

假设： “烧瓶”是您当前的工作目录

请按照以下步骤操作：

安装烧瓶

运行以下命令

pip install Flask

创建一个python文件app.py，将以下内容复制粘贴到该文件中。

    from flask import Flask, render_template, request

    app = Flask(__name__)


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


    @app.route('/greet', methods=['POST'])
    def greet():
        name = request.form['name']
        return render_template('greet.html', name=name)


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

index.html在位置“ / Flasak / templates”中创建一个文件

    <h1>Welcome</h1>
    <form action="http://localhost:5000/greet" method="POST">
        Name: <input type="text" name="name"> <button type="submit">Submit</button>
    </form>

greet.html在位置“ / Flasak / templates”中创建一个文件

    <h2>Have a good day, {{name}}</h2>

如下运行python文件

    python app.py

打开浏览器，然后点击http://localhost:5000，它将显示“ welcome”，以及用于输入名称的字段。提供您的名字并点击Submit。这样，您可以将值从客户端发送到服务器。
按之后Submit，将发生重定向，服务器将接收name并再次将其发送给客户端。现在您应该可以看到Have a good day,提供的名称了。

仅供参考，该项目的目录如下所示：

    Flask
      |
      |-> templates
      |    |
      |    |-> greet.html
      |    |-> index.html
      |
      |-> app.py

注意： 为了更好地理解，我建议您阅读教程。希望对您有帮助。

2020-07-26