如何將HTML表單數據作爲JSON發送到服務器？

Question

首先，我知道很多有相同標題的問題..我看到了很多東西，但是對我而言沒有任何作用。這就是爲什麼我打開這個問題。

我有兩個場景基本上 1）定義「行動」和「方法」的HTML形式。 2）沒有「action」和「method」的html格式。

因此，這裏是第一種情況，

1）我那裏有兩個字段，即電子郵件地址和密碼的形式。

這裏是的這段

<form id="login-form" action="http://192.168.52.166:6000/api/2/users/login/" method="post"> 

<p><label for="email">Email</label> 
<input type="email" name="email" id="email"></p> 

<p><label for="password">Password</label> 
<input type="password" name="password" id="password"></p> 

<button value="Submit" type="submit">Login</button> 
</form> 

首先，當我提交表單，它把我的所有字段值的URL編碼。表單的默認內容類型是urlencoded。我知道。所以現在我所做的是，添加ajax將其作爲json發送。

，這裏是我的jQuery SNIPPIT，

$('form').submit(function(){ 

    var obj = $('form').serializeJSON(); 

    $.ajax({ 
     type: 'POST', 
     url: 'http://192.168.52.166:6000/api/2/users/login/', 
     dataType: 'json', 
     data: JSON.stringify(obj), 
     contentType : 'application/json', 
     success: function(data) { 
      alert(data) 
     } 
    }); 

我使用SerializeJSON庫表單數據serealize到JSON。

現在發生的是同樣的事情，它發送表單數據爲urlencoded，而它假設發送爲json到服務器。

之後serializeJSON();函數當我提醒數據時，它成功顯示爲json。

這裏是我做過什麼

var obj = $('form').serializeJSON(); 
var jsonString = JSON.stringfy(obj); 
alert(jsonString) 

它成功地提醒我與我的表單字段的JSON值。但是當我像上面的jQuery表單演示中所示的那樣使用jQuery jQuery時，那個json字符串會假設前往服務器。但它不是，而是像urlencoded一樣。

2）第二種情況與第一種情況相同，但這次沒有表單的操作和方法。現在發生的事情是我的表單方法充當GET，即使我在jQuery中提到POST。

注意：我使用Wireshark檢查了所有報告以檢查HTTP請求和響應。

我在這裏做錯了什麼？我只想發送JSON數據到服務器而不是URLEncoded。我該怎麼辦？

編輯：我發現了另一件事。當我發送表單數據而沒有定義HTML格式的動作和方法時，我會收到來自服務器的以下請求和響應。 （這些反應從Wireshark的拍攝）

OPTIONS /api/2/users/login/ HTTP/1.1 
Host: 192.168.52.166:6000 
Access-Control-Request-Method: POST 
Origin: http://localhost 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36 
Access-Control-Request-Headers: content-type 
Accept: */* 
Referer: http://localhost/app/login.html 
Accept-Language: en-US,en;q=0.8,ca;q=0.6 
Accept-Encoding: gzip 

HTTP/1.1 200 OK 
Server: nginx/1.4.6 (Ubuntu) 
Date: Mon, 14 Nov 2016 00:55:42 GMT 
Content-Type: application/json 
Transfer-Encoding: chunked 
Connection: keep-alive 
Vary: Accept, Cookie 
X-Frame-Options: SAMEORIGIN 
Allow: POST, OPTIONS 

所以好像我在jQuery的，而不是在HTML表單POST提。它不工作。

這是我在使用html格式的動作和方法時得到的結果。

POST /api/2/users/login/ HTTP/1.1 
Host: 192.168.52.166:6000 
Content-Length: 48 
Cache-Control: max-age=0 
Origin: http://localhost 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36 
Content-Type: application/x-www-form-urlencoded 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Referer: http://localhost/app/login.html 
Accept-Language: en-US,en;q=0.8,ca;q=0.6 
Cookie: csrftoken=M5ItY7prMtJLBZWOJAN4D9uMDs2uFz5d 
Accept-Encoding: gzip 

email=emjimadhu%40email.com&password=qwerty123 

HTTP/1.1 201 CREATED 
Server: nginx/1.4.6 (Ubuntu) 
Date: Sun, 13 Nov 2016 18:11:51 GMT 
Content-Type: application/json 
Transfer-Encoding: chunked 
Connection: keep-alive 
Vary: Accept, Cookie 
X-Frame-Options: SAMEORIGIN 
Allow: POST, OPTIONS 
Set-Cookie: csrftoken=tFSyA9OSfyBi4NHoU6FVFSD7BZOE6S1a; expires=Sun, 12-Nov-2017 18:11:51 GMT; Max-Age=31449600; Path=/ 
Set-Cookie: sessionid=eoaq13tgrjdmsqwcke7zbhgv92dec9c3; expires=Sun, 27-Nov-2016 18:11:51 GMT; httponly; Max-Age=1209600; Path=/ 

答案找到

首先感謝大家誰試圖回答..答案沒有工作對我來說..它的原因有沒有一個編碼問題。我讀的jQuery Ajax作爲API並且發現，在contentType中定義除URL編碼之外的其他定義將觸發OPTIONS標誌而不是POST。基本上它所做的是瀏覽器將發送帶有OPTIONS標誌的預先請求並基於服務器的HTTP狀態，它將發送真正的請求。 。這是發生原因我的後端服務器不允許交叉來源請求..這就是爲什麼我得到這些問題..我發現了一個鉻擴展，它允許臨時交叉起源..這清除了我的p roblem ..

這裏是鏈接到瀏覽器擴展程序

Link to chrome extension

這是極不恰當的解決方案。但是，如果你有同樣的情況我的，你可以用它..

我的情況是我開發的前端和有API來提出請求..但我的後端，我沒有開發它..所以源遠離..在生產環境中，所有我的文件將被合併到服務器..但現在，爲了測試，我需要使用這個擴展與我的API一起工作..

Answer 1

您必須將該函數更改爲事件偵聽器。

$('#form').on('submit', function(event){ 

     var obj = $('form').serializeJSON(); 

     $.ajax({ 
      type: 'POST', 
      url: 'http://192.168.52.166:6000/api/2/users/login/', 
      dataType: 'json', 
      data: JSON.stringify(obj), 
      contentType : 'application/json', 
      success: function(data) { 
       alert(data) 
      } 
     }); 

     return false; 
    }); 

Answer 2

嘗試從數據中刪除JSON.stringify（）。 $就（{ 類型： 'POST'， 網址： 'http://192.168.52.166:6000/api/2/users/login/'， 數據類型： 'JSON'， 數據：OBJ， 的contentType： '應用/ JSON'， 成功：功能（數據）{ 警報（數據） } }）;

Answer 3

不要提交表單然後發出Ajax請求。使表單按鈕不是提交類型，只需從它的onclick中調用Ajax即可。

或者，如果你想少點工作，只是改變了形式的行動，一些閒置的價值「的javascript：//」，因此，只有Ajax請求真正被髮送到服務器上的提交事件：

<form id="login-form" action="javascript://" method="post"> 

Answer 4

不能使用HTTP協議的帖子內或get請求，你必須把你的服務器上的目錄中的文件的路徑，而不進行外部請求，嘗試從您的申請信息中刪除http://192.168.52.166:6000/

$.ajax({ 
     type: 'POST', 
     url: 'api/2/users/login/', 
     dataType: 'json', 
     data: JSON.stringify(obj), 
     contentType : 'application/json', 
     success: function(data) { 
      alert(data) 
     } 
    }); 

Answer 5

here is my code It will help you: 
     <script> 
     <form name="myform" id="myform"> 
     <div class="form-group"> 
     <label for="fullName">Name:</label> 
     <input type="text" name="fullName" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="email" name="email" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="subject">Subject:</label> 
     <input type="text" name="subject" class="form-control"> 
     </div> 
     <div class="form-group"> 
     <label for="mark">Mark:</label> 
     <input type="number" name="mark" class="form-control"> 
     </form> 
     </div> 
     <button type="submit" class="btn btn-success " id="submitform">Submit</button> 





     $(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> 

Answer 6

$('#form').on('submit', function(event){ 

     var obj = $('form').serialize(); 

     $.ajax({ 
      type: 'POST', 
      url: 'http://192.168.52.166:6000/api/2/users/login/', 
      dataType: 'json', 
      data: obj, 
      contentType : 'application/json', 
      success: function(data) { 
       alert(data) 
      } 
     }); 

     return false; 
    });