JSON 發布請求顯示 200 成功，但腳本未執行

Question

前端獲取名稱、年齡、城市，將其以 JSON 格式發送到我的后端 localhost:5100/getJson。

<form>
        <div class="form-group">
            <label for="text">Name:</label>
            <input type="text" class="form-control" id="name" placeholder="Enter name" name="name">
        </div>
        <div class="form-group">
            <label for="text">Age:</label>
            <input type="text" class="form-control" id="age" placeholder="Age" name="age">
        </div>
        <div class="form-group">
            <label for="text">City:</label>
            <input type="text" class="form-control" id="city" placeholder="Enter city" name="city">
        </div>
        <button onclick = "MyFunction()" id = "submitButton" type="submit" class="btn btn-default">Submit</button>
        <p id = "demo">

        </p>
        <script>

            function MyFunction() {
                var name = document.getElementById("name").value
                var age = document.getElementById("age").value
                var city = document.getElementById("city").value
                jsonRequest = {"name":name, "age":age, "city":city}

                fetch('http://localhost:5100/acceptJson', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: jsonRequest
                }).then(res => res.json())

            }
        </script>

我的后端是 python 中的 flask 服務器。

后端

app = Flask(__name__)


@app.route('/acceptJson',methods=['GET', 'POST'])
def acceptJson():
    jsonData = request.json
    name = jsonData['name']
    age = jsonData['age']
    city = jsonData['city']
    postToDatabase(name,age,city)
    return "Succesful"

if __name__ == '__main__':
    app.run(host = "localhost", port = 5100)

現在，當我使用 Postman 之類的軟件發出相同的 JSON 發布請求時，它可以工作，返回 200 並運行腳本。

但是當我通過代碼執行時，它返回200並且不運行腳本，因此javascript中的POST顯然有問題，但我不明白哪里錯了。

Answer 1

問題似乎與您的前端有關。 在以下答案中，我假設您的表單是由“MyFunction”提交的。

在 HTML 這一行中：

<button onclick = "MyFunction()" id = "submitButton" type="submit" class="btn btn-default">Submit</button>

該按鈕是一個提交類型的按鈕。 當您單擊該按鈕時，瀏覽器將照常提交表單。 標簽中沒有“action”屬性，請求被提交到您打開的網頁，即沒有請求被發送到后端。

可以在這個問題中找到解決方案： Form not submit with JS 。 但是，我會建議另一種方法來做到這一點。

您可以添加“event.preventDefault();” 在調用處理請求的 function 之前或將其添加到 function 的開頭以阻止表單以傳統方式自動提交。

<button onclick = "event.preventDefault();MyFunction()" id = "submitButton" type="submit" class="btn btn-default">Submit</button>

使用 preventDefault 的原因是它只停止瀏覽器默認行為，而其他解決方案（返回 false）停止傳播 DOM 的事件。