无法使用获取API将表单数据发布到烧瓶

Posted 2021-05-03

我在将数据发布到烧瓶服务器时遇到问题。当我使用邮递员时，示例数据发布就很好了，但是我不能从前端开始。

表格是动态生成的，看起来像这样

<div class="container" id="form-wrapper">
      <form id="comment-form" method="POST" onsubmit="send_comment(event)" class="border p-4 mt-4 rounded">
            <legend class="border-bottom mb-4">Register</legend>
                 <div class="form-group">
                      <label for="comment">Comment</label>
                            <textarea rows="3" class="form-control" id="comment" aria-describedby="name_help" name="comment"</textarea>
                            <input type="hidden" class="form-control" id="geom" name="geom" value="${coords25832[0]} ${coords25832[1]}">
             </div>
             <div class="form-group">
                 <button type="submit" class="btn-sm btn-primary">Save</button>
             </div>
      </form>
 </div>

这是发送数据的功能

function send_data(event) {
    event.preventDefault();

    let data = new FormData();
    data.comment= document.querySelector('form #comment').value;
    data.geom = document.querySelector('form #geom').value;

// Example data
//data = {"comment":"sd","geom":"567398.6224792203 7027428.422090762"}


fetch(`${baseurl}/api/comment`,
{
    method: "POST",
    headers: new Headers({
        //'Content-Type': 'application/x-www-form-urlencoded'
        'Content-Type': 'application/json'
    }),
    body: data
})
.then(function(res){ return res.json(); })
.then(function(data){ alert( JSON.stringify( data ) ) })
.catch(function (error) {  
    console.log('Request failure: ', error);  
});

最后是我的路线。我正在尝试获取发布的数据。我已经删除了保存到下面的数据库等代码。我只是想在服务器端获取数据。但是它失败了，我看不出为什么？我只是尝试发布json或表单数据，但无法正常工作，我似乎无法获取发布的数据？不确定是前端还是后端？

@mod.route(/comment', methods=['POST'])
def map_comment():
    if request.method == "POST":
        print("I am a post")
        if request.form:
            print("I have form data")
            #print(request.form['kommentar'])
        if request.data:
            print("I have data")
        if request.json:
            print("I have json")
            # Do stuff with the data...
        else:
            print("fail)

答案

首先，您的端点缺少返回值：

from flask import jsonify

@mod.route('/comment', methods=['POST'])
def map_comment():
    if request.method == "POST":
        print("I am a post")
        if request.form:
            print("I have form data")
            #print(request.form['kommentar'])
        if request.data:
            print("I have data")
        if request.json:
            print("I have json")
            # Do stuff with the data...
            return jsonify({"message": "OK"})
        else:
            print("fail")

        return jsonify({})

并且发布的数据应格式化为JSON，以便Flask可以成功解析它。

{
    method: "POST",
    headers: new Headers({
        //'Content-Type': 'application/x-www-form-urlencoded'
        'Content-Type': 'application/json'
    }),
    body: JSON.stringify(data)
})

由于错误的json格式，服务器在访问request.json时引发异常。