如何将 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 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 库将表单数据序列化为 json。

现在发生的事情是一样的，它将表单数据作为 urlencoded 发送，而它假设将作为 json 发送到服务器。

在 serializeJSON(); 函数之后，当我提醒数据时，它成功显示为 json。

这就是我所做的

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

它成功地用我的表单字段的 json 值提醒我。但是当我将它与 ajax jquery 一起使用时，如上面的 jquery 表单演示所示，该 json 字符串应该传输到服务器。但它不是，而是像 urlencoded 一样。

1. 第二个场景与第一个场景相同，但这次没有形式的动作和方法。现在发生的是我的表单方法充当 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。

原文由 Em Ji Madhu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的代码是正确的。你只需要 preventDefault();

 $( "#target" ).submit(function( event ) {

   //your code

  event.preventDefault();
});

没有它，表单也会由浏览器发布。您报告的 http 跟踪是浏览器的正常发布而不是 ajax 调用。

原文由 Andrea 发布，翻译遵循 CC BY-SA 4.0 许可协议