【问题标题】:How to pass strings from HTML to Python and back to HTML如何将字符串从 HTML 传递到 Python 并返回到 HTML
【发布时间】:2020-09-02 21:02:38
【问题描述】:

背景:

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

问题:

如何将“检查”按钮作为 JSON 按 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>

【问题讨论】:

  • 你需要一个 HTML 表单
  • @user1558604 我很快把它改成了一个表格,不像以前的那么漂亮,但是一个表格...
  • 你需要使用一些 AJAX。如果您使用 jQuery,请查看 jQuery.Post。您将要检查的值发布到 Flask/Python 端点,然后使用回调方法根据响应更新复选框标记。
  • 您使用的是 Flask 还是其他类型的端点?
  • @ngShravil.py 什么都没有 - 我对任何事情都持开放态度 - 我不知道从哪里开始.....

标签: python html jquery ajax


【解决方案1】:

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

假设: 'Flask' 是你当前的工作目录

请按照以下步骤操作:

  1. 安装 Flask

运行以下命令

pip install Flask
  1. 创建一个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()
  1. 在“/Flasak/templates”位置创建文件index.html
<h1>Welcome</h1>
<form action="http://localhost:5000/greet" method="POST">
    Name: <input type="text" name="name"> <button type="submit">Submit</button>
</form>
  1. 在“/Flasak/templates”位置创建一个文件greet.html
<h2>Have a good day, {{name}}</h2>
  1. 如下运行python文件
python app.py
  1. 打开浏览器并点击http://localhost:5000,它将显示“欢迎”以及一个输入名称的字段。提供您的姓名并点击Submit。像这样,您可以将值从客户端发送到服务器。

  2. 按下Submit后,会发生重定向,服务器会收到name并再次发送给客户端。现在您应该能够看到Have a good day, 以及提供的名称。

仅供参考,项目目录如下所示:

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

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

【讨论】:

  • 当用户“提交”一个名字时,如果他们不输入“名字”而是推送提交,@反而出现了 987654338@?
  • 在这种情况下,您不需要将数据发送到服务器。因此,它将超出原始问题的范围。你能再发一个问题让我知道吗?
  • 我创建了另一个问题here。看起来很简单,但我就是想不通。
猜你喜欢
  • 2017-09-26
  • 2022-07-29
  • 1970-01-01
  • 1970-01-01
  • 2014-05-15
  • 1970-01-01
  • 2018-03-09
  • 1970-01-01
  • 2019-10-13
相关资源
最近更新 更多