如何将HTML表单数据作为JSON发送到服务器？

Question

首先,我知道很多问题都有相同的标题..我看到了很多东西,但到目前为止我没有任何作用.这就是为什么我打开这个问题.

我有两个场景基本上1)以html格式定义"动作"和"方法".2)没有html形式的"动作"和"方法".

所以这是第一种情况,

1)我有一个只有两个字段的表单,即电子邮件和密码.

这是snippit

<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一样.

2)SECOND场景与第一场景相同,但这次没有形式的动作和方法.现在发生的事情是我的表单方法充当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扩展程序

这是非常不合适的解决方案..但如果你和我的情况相同,你可以使用它..

我的情况是我开发了前端并且有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;
   });