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

Question

首先，我知道很多相同標題的問題......我看到了很多東西，但到目前為止對我來說沒有任何作用。 這就是為什么我打開這個問題。

我基本上有兩個場景 1) 以 html 形式定義“動作”和“方法”。 2) 沒有 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 片段，

$('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庫將表單數據序列化為 json。

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

在serializeJSON(); 當我提醒數據時，它成功地顯示為 json。

這是我所做的

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

它成功地用我的表單字段的 json 值提醒我。 但是當我將它與 ajax 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 狀態發送真實請求.. 發生這種情況是因為我的后端服務器不允許跨源請求..這就是我遇到這些問題的原因..我找到了一個允許臨時跨源的chrome擴展..這解決了我的問題..

這是該 chrome 擴展的鏈接

鏈接到 chrome 擴展程序

這是非常不合適的解決方案..但如果你和我的情況一樣，你可以使用它..

我的情況是我開發了前端並且有API來發出請求..但是我的后端，我沒有開發它..所以源很遠..在生產環境中，我所有的文件都會在服務器中合並。 . 但是現在，為了測試，我需要使用這個擴展來處理我的 API..

Answer 1

你的代碼是正確的。 你只需要 preventDefault();

$( "#target" ).submit(function( event ) {
 
   //your code

  event.preventDefault();
});

沒有它，表單也會由瀏覽器發布。 您報告的 http 跟蹤是瀏覽器的正常帖子，而不是 ajax 調用。

Answer 2

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

    $('#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 3

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

或者，如果您想減少工作量，只需將表單操作更改為某個空閑值“javascript://”，以便在提交事件上僅將 ajax 請求實際發送到服務器：

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

Answer 4

這是我的代碼它會幫助你：

  <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>
  <button type="submit" class="btn btn-success " id="submitform">Submit</button>


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

Answer 5

$('#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;
   });

Answer 6

jQuery 函數：

var _serializeForm = function (id) {
        var result = {};
        $.each($(id).serializeArray(), function (i, field) {
            result[field.name] = field.value.trim() || null;
        });
        return result;
    }

為您的表單提供“Id”，然后使用上述方法進行 json 序列化

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

Answer 7

$('#btn').click(function(){

  $.post('getJSONData.jsp', $('#wForm').serialize(), function(json){

    alert(json);

  }, 'json');

});

Answer 8

您不能在 post 或 get 請求中使用 http 協議，您必須將文件路徑放在您服務器上的目錄中，而不發出外部請求，請嘗試從您的請求中刪除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 9

試試這個從數據中刪除 JSON.stringify() 。 $.ajax({ type: 'POST', url: ' http://192.168.52.166:6000/api/2/users/login/ ', dataType: 'json', data: obj, contentType : 'application/json ', 成功: function(data) { alert(data) } });