python - 使用 Python 的 Flask 模块更新同一个站点

问题描述

背景：

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

我想要达到的目标：

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

第 1 部分/第 1 步：我可以创建如下表格

部分/步骤2：当表格填写如下，并点击[验证]按钮时，进入步骤3

第 3 部分/第 3 步：一旦点击验证按钮，就在其下方，传递的信息将被放置在其下方。还有两个按钮，[提交]和[取消]按钮。如果点击 [cancel]，则站点将重置为步骤 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>

标签： pythonflask

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

<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>

python - 使用 Python 的 Flask 模块更新同一个站点

问题描述

解决方案

推荐阅读