如何控制首先使用 JavaScript 的流程，然后將控制發送到使用 flask 框架創建的后端服務器？

Question

我正在使用 Flask 框架。我在前端有一個用於登錄 ID 和密碼的表單標簽以及一個提交按鈕。

我想在前端使用 JavaScript 來驗證用戶在表單字段中提供的數據，然后如果一切正常，那么我想將用戶提供的數據發送到后端服務器並使用 python 進行處理。 .

但是如何控制當用戶單擊提交按鈕時控件將 go 到 JavaScript 代碼然后驗證后將數據發送到后端服務器的過程

在片段中，我給出了一個虛擬示例。 In that my doubt is how to first send the control to the validate_login_form() written in Java Script and then after validation the control should go to the {{url_for('home')}} written in the action part using the Jinja2 template engine

Here the trouble that i am having is, after filling up the form, when the user clicked of the submit button, the control goes fine to the Java Script function written to validate the form but even if the Java Script returns false, the control automatically轉到后端服務器。

但我想要做的是，如果 Java 腳本返回 false，控件應該停在那里並要求用戶再次填寫表格。

 function validate_login_form(){ let login_id = document.getElementById('login_id').value let password = document.getElementById('password').value if(login_id == '' && password == ''){ alert('please enter the login id and password') return(false) } else if(login_id == '' && password;= ''){ alert('please enter the login id') return(false) } else if(login_id != '' && password == ''){ alert('please enter the password') return(false) } else{ if(login_id == 'test' && password == 'test'){ return(true); } else{ alert('please enter the valid login id and password') return(false) } } }

 <html> <head> </head> <body> <form action="{{url_for('home')}}" onsubmit="validate_login_form()"> <label for="login_id">LogIn</label> <input type="text" name="login_id" placeholder="login Id" id="login_id"> <label for="password">Password</label> <input type="password" name="password" placeholder="password" id="password"> <br><br> <input type="submit" value="submit" > </form> <script src="{{ url_for('static', filename='scripts/login.js') }}"></script> </body> </html>

Answer 1

簡單： https://www.w3schools.com/jsref/event_onsubmit.asp 。 那里有你的 go：

 <form onsubmit="myFunction()">
  Enter name: <input type="text">
  <input type="submit">
</form> 

<script>
function myFunction() {
    return true;
}
</script>

Answer 2

HTML 來自示例：

<form method="POST" id="myForm">
    <input type="email" name="email" id="email"/>
    <input type="password" name="password" id="password"/>
    <button type="submit">Login</button>
</form>

javascript：

var myForm = document.getElementById("myForm");
myForm.onsubmit = function(e){
    e.preventDefault();


    // validate here and produce data


    fetch('/mypage', {
        method: "POST",
        credentials: "include",
        cache: "no-cache",
        body: data,
        headers: new Headers({
          "Content-Type": "application/json",
        }),
      })
       .then((response) => {
          if (response.status !== 200) {
            // handling if status is not ok(200)
          }
          response.text().then((res) => {
            // response handling

            if(res === "success"){
               // redirect to homepage or do anything
            } else {
               // something went wrong
            }
          });
        })
        .catch((err) => {
            // error handle
        });
}

燒瓶/Python：

from flask import request
@app.route('/mypage', methods=['GET', 'POST'])
def myPage():
    if request.method == "POST" and request.json:
          data = request.json
         
          # send data to database

          return 'success', 200

Answer 3

代碼中唯一的問題是 html 中的表單標簽，

我應該寫onsubmit=return validate_login_form()而不是onsubmit=validate_login_form()

By this code if the JavaScript function returns true then the page will be redirected to the url written in the action field of the form tag and if the JavaScript function returns flase then the control will remain in the same page without being redirected. 這樣就可以控制流量了

 function validate_login_form(){ let login_id = document.getElementById('login_id').value let password = document.getElementById('password').value if(login_id == '' && password == ''){ alert('please enter the login id and password') return(false) } else if(login_id == '' && password;= ''){ alert('please enter the login id') return(false) } else if(login_id != '' && password == ''){ alert('please enter the password') return(false) } else{ if(login_id == 'test' && password == 'test'){ return(true); } else{ alert('please enter the valid login id and password') return(false) } } }

 <html> <head> </head> <body> <form action="{{url_for('home')}}" onsubmit="return validate_login_form()"> <label for="login_id">LogIn</label> <input type="text" name="login_id" placeholder="login Id" id="login_id"> <label for="password">Password</label> <input type="password" name="password" placeholder="password" id="password"> <br><br> <input type="submit" value="submit" > </form> <script src="{{ url_for('static', filename='scripts/login.js') }}"></script> </body> </html>

如何控制首先使用 JavaScript 的流程，然后將控制發送到使用 flask 框架創建的后端服務器？

問題描述

3 個解決方案

解決方案1
0

解決方案2
0 2020-07-29 14:48:37

解決方案3
0 已采納 2020-08-23 13:54:51

如何控制首先使用 JavaScript 的流程，然后將控制發送到使用 flask 框架創建的后端服務器？

問題描述

3 個解決方案

解決方案1 0

解決方案2 0 2020-07-29 14:48:37

解決方案3 0 已采納 2020-08-23 13:54:51

解決方案1
0

解決方案2
0 2020-07-29 14:48:37

解決方案3
0 已采納 2020-08-23 13:54:51