jQuery 在 HTML 表单提交上发送 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18373483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Send JSON Data on HTML form submit
提问by user462455
I have a html form and that form has two fields (name , description). When a user hits submit button for that form I want to submit form data in json format.
我有一个 html 表单，该表单有两个字段（名称、描述）。当用户点击该表单的提交按钮时，我想以 json 格式提交表单数据。
I tried the following:
我尝试了以下方法：
function submitData(){
payload.name = $("#project-name").val();
payload.description = $("#project-description").val();
$.post("http://localhost:5000/task-groups/add", payload);
return false;
}
Submitdata is called when my form's button is clicked. But this is sending form data and not json data
当我的表单按钮被点击时，Submitdata 被调用。但这是发送表单数据而不是 json 数据
I have a python flask server running.
我有一个 python Flask 服务器正在运行。
[1] When I do:
[1] 当我这样做时：
payload = request.get_json()
name = payload['name']
It is throwing the following exception
它抛出以下异常
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] However, I am able to access the data on the server side using following:
[2] 但是，我可以使用以下方法访问服务器端的数据：
name = request.form['name']
Is it possible to send json data on form submit, so that I can access data using [1]
是否可以在表单提交时发送 json 数据，以便我可以使用 [1] 访问数据
The reason I am trying to send JSON data on form submit is because I have a server which serves REST API for command line clients. And I would like to use same server and endpoint to serve browser based clients.
我尝试在表单提交时发送 JSON 数据的原因是我有一个服务器，它为命令行客户端提供 REST API。我想使用相同的服务器和端点来为基于浏览器的客户端提供服务。
回答by Dan Malcolm
There are 2 things you need to do to send JSON to the server with a jQuery AJAX call:
使用 jQuery AJAX 调用将 JSON 发送到服务器需要做两件事：
The request payload should be a string containing the JSON payload (not a JavaScript object)
The "Content-Type" header in the HTTP request should be set to "application/json". This lets the server know that the request payload contains JSON data. $.post uses the default value of "application/x-www-form-urlencoded" for the "Content-Type" header. $.ajax allows you to set this header via the "contentType" option.
请求负载应该是包含 JSON 负载的字符串（不是 JavaScript 对象）
HTTP 请求中的“Content-Type”标头应设置为“application/json”。这让服务器知道请求负载包含 JSON 数据。$.post 使用默认值“application/x-www-form-urlencoded”作为“Content-Type”标头。$.ajax 允许您通过“contentType”选项设置此标头。
Try changing your code to the following:
尝试将您的代码更改为以下内容：
$.ajax({
type: 'POST',
url: 'http://localhost:5000/task-groups/add',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(payload)
});
Note that $.post has a dataType parameter, but this controls the "Accept" request header, which is used to indicate the preferred format for the response.
请注意，$.post 有一个 dataType 参数，但它控制“Accept”请求标头，该标头用于指示响应的首选格式。
回答by Pranit Bhor
using ajax call you can send successfully using this code:
使用 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>
回答by mplungjan
You need to cancel the event
您需要取消活动
$(function() {
$("form").on("submit",function(e) {
e.preventDefault(); // cancel the submission
$.post($(this).attr("action"),{ "name":$("#project-name").val(), "description":$("#project-description").val() });
});
});
To post JSON read Post JSON to Python CGI
要发布 JSON 读取Post JSON to Python CGI
回答by Reigel
I'm not sure... but I think passing as JSON is not the right way to do this... or it's just "troublesome" to do...
我不确定......但我认为传递为 JSON 不是这样做的正确方法......或者它只是“麻烦”做......
why not just do it like this then?!
为什么不这样做呢？！
payload = request.form
name = payload['name']
