单击按钮 javascript 的函数让我获得了输入数字的价值

Question

我将 FastApi 用于 API 和 HTML/CSS 接口。

我想要按钮的点击功能 returns 我想要的值 (mt

表示当我放置节点 1 和节点 2 时，它会从 JSON 数组中获取它的预测。

这是我的代码：

这是数据列表

prediction_data = [
  { "node1": 0, "node2": 1, "pred": 0},
  { "node1": 0, "node2": 476, "pred":0.352956 },
  { "node1": 0, "node2": 494, "pred":0.769988 },
  { "node1": 1, "node2": 505, "pred":0.463901 },
  { "node1": 9, "node2": 68 , "pred":1.238807},
  { "node1": 15, "node2": 408, "pred":0.204171 },
  { "node1": 18, "node2":549 , "pred":0.204171 },
  { "node1": 60, "node2": 227, "pred":0.204171 },
  { "node1": 199, "node2": 220, "pred":0.245246 },
  { "node1": 170, "node2": 570, "pred":0.509272 },
  { "node1": 148, "node2": 570, "pred":0.204171 },
  { "node1": 151, "node2": 384, "pred":0.204114 },
  { "node1": 232, "node2": 337, "pred":0.285999 },
  { "node1": 446, "node2": 509, "pred":0.291206 },
  { "node1": 510, "node2":576 , "pred":0.495378 },
  { "node1": 571, "node2":589 , "pred":0 },
  { "node1": 585, "node2":596 , "pred":0.245243 },
  { "node1": 446, "node2":509 , "pred":0.291206 },
  { "node1": 375, "node2":383 , "pred":0.46390 },
  { "node1": 461, "node2":462 , "pred":0 }
    ]

这是想要值的getter函数

# Prediction
@app.get("/prediction/{node1,node2}", response_class=HTMLResponse)
async def gets(request: Request, node1: int, node2: int):
    matching = list(filter(lambda x: x['node1'] == node1 and x['node2'] == node2, prediction_data))
    mt = matching[0]['pred'] if matching else None
    return templates.TemplateResponse("Interface.html", {"request": request, "mt": mt})

这是界面


<!DOCTYPE html>
<html lang="en">
<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">

    <title>Link Prediction</title>
    <link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet">
</head>

<body>
    <div class="container" >
        <h1>Link Prediction </h1>
        <h2>In Social Network</h2>
        <form class="form" action="#">
          <fieldset class="form-fieldset ui-input __first">
            <input type="number" id="Node1" tabindex="0" /> {{node1}}
            <label for="Node1">
              <span data-text="Node 1">Node 1</span>
            </label>
          </fieldset>
          
          <fieldset class="form-fieldset ui-input __second">
            <input  type="number" id="Node2" tabindex="0" /> {{node2}}
            <label for="Node2">
              <span data-text="Node 2">Node 2 </span>
            </label>
          </fieldset>

          <div class="form-footer">
            <button  onclick="myfunctionName(Node1, Node2)" class="btn">Predict Now</button>
          </div>

          <script type="text/javascript">
              
              function myfunctionName( n1,n2 ){
          
                  document.getElementById("Node1").innerHTML += n1;
                  document.getElementById("Node2").innerHTML += n2;
                  document.getElementById("Prediction") = mt;
              }
          
          </script>

<fieldset class="form-fieldset ui-input __third">
    <input type="text" id="Prediction" readonly/> {{mt}}
    <label for="Prediction">
      <span data-text="Prediction Result" >Prediction Result</span>
    </label>
  </fieldset>
          
        </form>
      </div>
</body>
</html>

Answer 1

首先，您应该看看 Path parameters 在 FastAPI 中是如何工作的。您代码中的以下 @app.get("/prediction/{node1,node2}" 不是传递路径参数的有效路径。它将被识别为单个路径名。您可以通过打开 Swagger UI 来验证这一点在 http://127.0.0.1:8000/docs, which shows that the endpoint expects node1 and node2 to be query params, not path params. When submitting form data, one should use Form for that purpose, and POST HTTP method (your endpoint should be using @app.post()). Please take the time to read the documentation, as well as have a look at this answer。但是，如果您仍然需要这是一个 GET 请求，您可以在 API 中使用 GET 操作 @app.get()，并将 HTML 表单的方法定义为 method="GET"。下面是一个演示这一点的例子。

在您的 API 中（在 http://127.0.0.1:8000 访问主页）：

@app.get("/", response_class=HTMLResponse)
async def main(request: Request):
    return templates.TemplateResponse("predict.html", {"request": request})
    
@app.get("/predict", response_class=HTMLResponse)
async def predict(request: Request, node1: int, node2: int):
    matching = list(filter(lambda x: x['node1'] == node1 and x['node2'] == node2, prediction_data))
    mt = matching[0]['pred'] if matching else None
    return templates.TemplateResponse("predict.html", {"request": request, "node1": node1, "node2": node2, "mt": mt})

在您的模板中（即本例中的 predict.html）

<!DOCTYPE html>
<html lang="en">
   <body>
      <h1>Link Prediction </h1>
      <h2>In Social Network</h2>
      <form method="GET" action="/predict" id="myForm">
         node1 : <input type="text" name="node1" value={{node1}}> <br>
         node2 : <input type="text" name="node2" value={{node2}}><br>
         <input type="submit" value="Predict" >
      </form>
      Prediction Result: <b>{{mt}}</b>
   </body>
</html>

单击按钮 javascript 的函数让我获得了输入数字的价值

Click function for button javascript that gets me the value of giving numbers inputs

javascript

python

api

json

fastapi