使用 Python 的 Flask 模块更新同一个站点答案

【问题标题】：Updating the same site with Python's Flask module使用 Python 的 Flask 模块更新同一个站点
【发布时间】：2020-05-29 04:56:20
【问题描述】：

背景：

我对在 Python 中开发前端和 Flask 模块还很陌生。我很难更新同一页面。

我想要达到的目标：

我想要实现的目标分为三个部分

第 1 部分/第 1 步：我可以创建如下所示的表单

第 2 部分/第 2 步： 如下所示填写表格并点击 [验证] 按钮后，进入第 3 步

第 3 部分/第 3 步：点击验证按钮后，通过的信息将被放置在其下方。还有两个按钮，[提交]和[取消]按钮。如果点击 [取消]，网站将重置为 步骤 1 中的状态。如果 [commit] 被击中，它会在 第 4 步

中转到不同的网站

部分/步骤 4： 如果从上图中点击 [commit]，则会检索另一个站点并显示以下消息。

注意：

很高兴分享我的代码，但我在第 1 步中只有一个空表单。之后我无法继续。如前所述，我对前端的东西很陌生。

更新： 我目前在两件事上遇到困难：

当我单击 [取消] 时，整个表单向左移动（如何使其居中？）
如何在点击 [verify] 按钮后打印多个内容（最好在居中的表格中）

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("first_name").value
        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>


    <style>
        h3 {text-align: center;}
        .right {
            text-align: right;
            margin-right: 1em;
            }
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            }
    </style>

</head>

<h3>Personnel Details</h3>
<div class="center" id="form">
	<table>
    <tr>
      <td class="right">
	      <label>Salutation:</label>
      </td>
      <td>
        <select name="gender">
          <option value=""></option>
          <option value="male">Mr.</option>
          <option value="female">Ms.</option>                    
        </select>
      </td>
    </tr>
    <tr>
      <td class="right">
	      <label>First Name:</label>
      </td>
      <td>
    	  <input id="first_name">
      </td>
    </tr>
    <tr>
      <td class="right">
    	  <label>Middle Name:</label>
      </td>
      <td>
          <input id="middle_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Last Name:</label>
      </td>
      <td>
          <input id="last_name">
      </td>    
	</tr>
    <tr>
      <td class="right">
    	  <label>Email:</label>
      </td>
      <td>
          <input id="email">
      </td>    
	</tr>    <tr>
      <td class="right">
    	  <label>DOB:</label>
      </td>
      <td>
          <input type="date" name="issue_date" value="" min="1900-01-01" max="2100-12-31">
      </td>    
	</tr>    
    
    <tr>
      <td>
      </td>
      <td  class="center">
        <div>
            <button onclick="onVerify()">Verify</button>
        </div>
      </td>
    </tr>
    
    
    
    </table>
</div>
<div id="verify">
    <div id="verifyName">
    </div>
    <button onclick="onCommit()">Commit</button>
    <button onclick="onCancel()">Cancel</button>
</div>
<div id="committed">
    Committed! :)
</div>
</html>

【问题讨论】：

这不是 Flask 问题。你想要的听起来像是一个单页应用程序，你需要 JavaScript 来实现这一点。基本上你需要将一个方法绑定到你的Verify 按钮，当它被点击时，该方法会向 Flask 发送一个 POST 请求，Flask 会将 JSON 响应发送回前端，然后它将使用 JSON 更新页面结果。 Commit 和 Cancel 按钮也必须用 JS 实现。 Flask 有一个示例，用于编写响应 JSON here 的函数
this 有用吗？这更像是你需要做的 JavaScript 更改。
@ngShravil.py 我真的很挣扎:(

标签： python flask

【解决方案1】：

这只是最小的代码，我曾经只是给出一个想法，如何实现类似的行为，只需一个输入字段。您可以轻松地将其扩展到其他字段。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("verify").style.display = "none"; 
        document.getElementById("committed").style.display = "none"; 
    })
    function onVerify() {
        document.getElementById("verifyName").innerHTML = 'First Name: ' + document.getElementById("name").value
        document.getElementById("verify").style.display = "block"; 
    }
    function onCommit() {
        document.getElementById("form").style.display = "none"; 
        document.getElementById("verify").style.display = "none";
        document.getElementById("committed").style.display = "block"; 
    }
    function onCancel() {
        document.getElementById("form").style.display = "block";
        document.getElementById("verify").style.display = "none";
        document.getElementById("name").value = ""
    }
</script>
<div id="form">
    <label> First Name:
        <input id="name">
    </label>
    <div>
        <button onclick="onVerify()">Veryfy</button>
    </div>
</div>
<div id="verify">
    <div id="verifyName">
    </div>
    <button onclick="onCommit()">Commit</button>
    <button onclick="onCancel()">Cancel</button>
</div>
<div id="committed">
    Committed! :)
</div>

【讨论】：

谢谢，但我仍在苦苦挣扎 - 我已将“更新”附加到我的问题中。我似乎无法摆脱这两个问题！ :(
您的代码在我的浏览器中运行良好。您在哪个浏览器中查看？
两个问题仍然存在：/ 尽管更改了 CDN