jquery - 在 HTML 表单提交上发送 JSON 数据

Question

我有一个 html 表单，该表单有两个字段(名称、描述)。当用户点击该表单的提交按钮时，我想以 json 格式提交表单数据。

我尝试了以下方法:

        function submitData(){
            payload.name = $("#project-name").val();
            payload.description = $("#project-description").val();

            $.post("http://localhost:5000/task-groups/add", payload);
            return false;
        }

单击表单按钮时将调用 Submitdata。但这是发送表单数据而不是json数据

我有一个正在运行的 python Flask 服务器。

[1]当我这样做时:

payload = request.get_json()
name = payload['name']

抛出以下异常

File "/Users/saik/projects/mturk/server/src/index.py", line 37, in add_task_group
  name = payload['name']
TypeError: 'NoneType' object is not subscriptable

[2]但是，我可以使用以下方式访问服务器端的数据:

name = request.form['name']

是否可以在表单提交时发送 json 数据，以便我可以使用 [1] 访问数据

我尝试在表单提交时发送 JSON 数据的原因是因为我有一个为命令行客户端提供 REST API 的服务器。我想使用相同的服务器和端点来为基于浏览器的客户端提供服务。

Answer 1

要使用 jQuery AJAX 调用将 JSON 发送到服务器，您需要执行两件事:

• 请求负载应该是包含 JSON 负载的字符串(不是 JavaScript 对象)

• HTTP 请求中的“Content-Type” header 应设置为“application/json”。这让服务器知道请求负载包含 JSON 数据。 $.post 使用默认值“application/x-www-form-urlencoded”作为“Content-Type” header 。 $.ajax 允许您通过“contentType”选项设置此 header 。

尝试将代码更改为以下内容:

$.ajax({
  type: 'POST',
  url: 'http://localhost:5000/task-groups/add',
  contentType: 'application/json',
  dataType: 'json',
  data: JSON.stringify(payload)
});

请注意，$.post 有一个 dataType 参数，但它控制“Accept”请求 header ，该 header 用于指示响应的首选格式。