出于开发目的,我使用 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() }
最佳答案
您可以尝试的一件事是使用 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;
})
关于javascript - 正常表单提交正确但ajax表单提交为空,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41325168/