javascript - 正常表单提交正确但ajax表单提交为空

Question

出于开发目的，我使用 Flask-RESTful 在 Flask 中开发了一个 super 简单的 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>

returns: { '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>

提交.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;
})

returns {'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;
})