4

我有一个 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 烧瓶服务器正在运行。

[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。而且我想使用相同的服务器和端点来为基于浏览器的客户端提供服务。

4

4 回答 4

4

使用 jQuery AJAX 调用将 JSON 发送到服务器需要做两件事：

  • 请求负载应该是一个包含 JSON 负载的字符串（不是 JavaScript 对象）

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

尝试将您的代码更改为以下内容：

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

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

于 2013-09-26T08:36:34.103 回答
0

我不确定......但我认为传递 JSON 不是正确的方法......或者它只是“麻烦”......

那为什么不这样做呢？

payload = request.form
name = payload['name']
于 2013-08-22T07:17:51.960 回答
0

您需要取消活动

$(function() {
  $("form").on("submit",function(e) {
    e.preventDefault(); // cancel the submission
    $.post($(this).attr("action"),{ "name":$("#project-name").val(), "description":$("#project-description").val() });
  });
});

要发布 JSON，请阅读Post JSON to Python CGI

于 2013-08-22T06:55:58.347 回答
0

使用 ajax 调用，您可以使用以下代码成功发送：

<script>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#myform").serializeJSON());
console.log(MyForm);
 $.ajax(
 {
 url : "<your url>",
 type: "POST",
 data : MyForm,

 });
 e.preventDefault(); //STOP default action

});
});
</script>
于 2016-11-25T04:55:31.623 回答