我有一个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的服务器。我想使用相同的服务器和端点来为基于浏览器的客户端提供服务。
答案 0 :(得分: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”请求标头,该标头用于指示响应的首选格式。
答案 1 :(得分: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
答案 2 :(得分:0)
我不确定......但我认为传递JSON不是正确的做法......或者它只是“麻烦”...
为什么不这样做呢?!
payload = request.form
name = payload['name']
答案 3 :(得分: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>