JSON Post 请求显示 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 中的烧瓶服务器。

后台

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 submitting with JS。不过，我会建议另一种方法。

您可以添加“event.preventDefault();”在调用处理请求的函数之前或将其添加到函数的开头以阻止表单以传统方式自动提交。

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

使用 preventDefault 的原因是它只停止浏览器默认行为，而其他解决方案（返回 false）停止传播 DOM 的事件。