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）第二场景与第一场景相同，但这次没有形式的动作和方法。现在发生的事情是我的表单方法充当了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读取并发现，定义除了URL编码之外在contentType中将触发OPTIONS标志而不是POST。基本上它的作用是浏览器将发送带有OPTIONS标志的预请求并基于服务器HTTP状态，它将发送实际请求..这是因为我的后端服务器不允许交叉原始请求..这就是为什么我遇到了这些问题..我发现了一个镀铬扩展，允许暂时交叉原点..这清除了我的问题..

以下是该Chrome扩展程序的链接

Link to chrome extension

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

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

这是我的代码它会帮助你：

    "update": {
        "*": true,
        "Yacb6CzuB9": true
    },

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函数：

df['Median'] = df.groupby('Name').transform('median')

在表单中提供“ Id”，然后使用上述方法进行json序列化

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

Answer 7

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

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

    alert(json);

  }, 'json');

});

Answer 8

您不能在帖子或获取请求中使用http协议，您必须将文件的路径放在服务器上的目录中，而不要发出外部请求，请尝试从请求POST中删除http://192.168.52.166:6000/ < / p>

  $.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（）。 $就（{ 键入：＆＃39; POST＆＃39;，网址：＆＃39; http://192.168.52.166:6000/api/2/users/login/＆＃39;， dataType：＆＃39; json＆＃39;，数据：obj， contentType：＆＃39; application / json＆＃39;，成功：函数（数据）{ 警报（数据） } }）;

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

9 个答案: