如何创建一个查找 fetch 请求的 if 语句？答案

【问题标题】：How can I create an if statement that looks for fetch requests?如何创建一个查找 fetch 请求的 if 语句？
【发布时间】：2019-11-15 11:19:36
【问题描述】：

我正在使用 Flask 和 Fetch()

我有一个表格当文本输入“a”更改/输入文本时。一个提取请求被发送到“/validate-form”。

当表单末尾的提交按钮被按下时。它也将表单提交到“/validate-form”。

我可以创建 What If else 语句，它将能够区分是发送获取请求还是提交表单到“/validate-form”

我已经尝试了以下方法，但是“FETCH”一直打印到终端。

@app.route("/validate-form", methods = ["POST"])
def register():
    if request.method == "POST":
        if "username" in request.form and "password" in request.form:
           print("submitted")
           return "Thanks"
        else:
            print("FETCH")
            return "Thanks"

【问题讨论】：

标签： javascript python forms flask fetch

【解决方案1】：

它对我有用，它正确打印“提交”。

我可以提出的解决方案是使用一些隐藏输入，只有在单击提交按钮时才会发送这些输入。

<input type="hidden" name="isFormSubmitted" value="true" />

更完整的例子：

前端：

<h1>Hello Flask</h1>
<form id="myForm" action="/validate-form" method="POST">
    <label>Password</label>
    <input name="password" type="password" />
    <label>Username</label>
    <input name="username" type="text" />
    <input type="hidden" name="isFormSubmitted" value="true" />
    <label>Validate when I am changed</label>
    <input name="validate" type="text" id="validate"/>
    <input type="submit" value="Send" />
</form>


<script>
window.onload = function() {
  const myForm = document.getElementById("myForm");
  const validateInput = document.getElementById("validate");
  //input or change event handler
  validate.addEventListener("input", function(e) {
    const data = new FormData(myForm);
    data.set("isFormSubmitted", "false");
    fetch('/validate-form', {
      method: 'POST',
      body: data,
    }).then((response) => {
        console.log(response);
    });
  })
}
</script>

后端：

@app.route("/validate-form", methods = ["POST"])
def register():
    if request.method == "POST":
        print(request.form)
        if request.form["isFormSubmitted"] == "true":
           print("SUBMITTED")
           return "Thanks submitted"
        else:
            print("FETCH")
            return "Thanks fetch"

【讨论】：

【解决方案2】：

如果我很了解您想要什么并且为了区分这一点，您可以在通过“POST”发送数据之前在 javascript 中测试事件类型，如下所示：

   if(window.event.type === 'submit'){
        // You are sending data
    } else {
       // You are validating data
    }

【讨论】：