正常表单正确提交但ajax表单提交null

Question

我在Flask中使用Flask-RESTful开发了一个超级简单的REST API用于开发目的。它从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
• 各种不同的发送方式＆＃34;表格数据＆＃34;包括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;
})