普通表单提交正确，但ajax表单提交空。

Question

我已经开发了一个超级简单的RESTful在酒瓶中使用烧瓶-RESTful用于开发目的。它从POST方法中获取文本，并与提交的文本一起返回json数据。

API的代码：

api.py

from flask import Flask, request
from flask_restful import Resource, Api, reqparse
from flask_cors import CORS, cross_origin

app = Flask(__name__)
api = Api(app)
CORS(app)


class APITest(Resource):

    parser = reqparse.RequestParser()
    parser.add_argument('text')

    def get(self):
        return {'message': 'welcome to the api!'}

    def post(self):

        args = self.parser.parse_args()
        _text = args['text']

        return {'text': _text}


api.add_resource(APITest, '/api')

if __name__ == '__main__':
    app.run(debug=True)

现在，下面的HTML工作得很好，我得到了我要寻找的没有错误的响应：

index.html

<form method="post" action="http://localhost:5000/api">
    <input type="text" name="text" id="text-input">
    <input type="submit" value="Send!">
</form>

返回：{ 'text': 'whatever text i submitted' }

如果我试图做完全相同的事情，但是使用AJAX，则会得到不同的结果：

index.html

...
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="submit.js"</script>
...

<form>
    <input type="text" name="text" id="text-input">
    <input type="submit" value="Send!">
</form>

submit.js

$("form").submit((e) => {
  e.preventDefault();

  var fd = new FormData()
  fd.append('text', $('#text-input').val())

  $.ajax({
      url: 'http://localhost:5000/api',
      type: 'POST',
      data: fd,
      processData: false
  });

  return false;
})

返回{'text': null}

我试过的东西

• 用${'text-input').val()取代document.getElementById('text-input').value
• 发送“表单数据”的各种不同方式，包括var fd = { text: ${'text-input').val() }

Answer 1

您可以尝试的一件事是使用jquery获取表单数据，而不是自己构建它。示例：

<form id="respond_form" enctype="multipart/form-data">
    <input type="text" name="text" id="text-input">
    <input type="file" name="fl" id="fl">
    <input type="submit" value="Send!">
</form>

$("#respond_form").submit((e) => {
  e.preventDefault();

  var form_data = new FormData();  
  var file_data = $("#fl").prop("files")[0]; 
  form_data.append("file", file_data)
  $.ajax({
      url: 'http://localhost:5000/api',
      type: 'POST',
      data: form_data,
      processData: false
  });

  return false;
})