如何将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; 
    });