在HTML表單上發送JSON數據提交

我有一個html表單，該表單有兩個字段（名稱，說明）。當用戶點擊該表單的提交按鈕時，我想以json格式提交表單數據。在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。我想使用相同的服務器和端點來爲基於瀏覽器的客戶端提供服務。

來源

2013-08-22 user462455

您需要取消事件

$(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-22 06:55:58 mplungjan

試過了。它仍然以表單數據形式發送 – user462455

http://postimg.org/image/5gmo24okj/ – user462455

http://postimg.org/image/y3kpeg1ot/ – user462455

我不知道......但我想傳遞的JSON是不是這樣做的正確方法.. 。或者它只是「麻煩」地做...

爲什麼不只是這樣做呢？！

payload = request.form 
name = payload['name']

來源

2013-08-22 07:17:51 Reigel

有你需要的做派JSON與jQuery的AJAX調用服務器2兩件事：

請求負載應該是包含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) 
});

注意$。員額都有一種數據類型的參數，但這種控制的「接受」請求頭，它是用來表示首選格式對於響應。

來源

2013-09-26 08:36:34

使用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-25 04:55:31

在HTML表單上發送JSON數據提交

回答

相關問題