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

Posted 2023-02-22

【中文标题】如何将 HTML 表单数据作为 JSON 发送到服务器？

【英文标题】：How to send HTML form data as JSON to server?

【发布时间】：2017-03-29 08:14:25

【问题描述】：

首先，我知道很多具有相同标题的问题。我看到了很多东西，但到目前为止对我来说没有任何效果。这就是我打开这个问题的原因。

我基本上有两种情况 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 阅读并发现，除了 URL 编码之外的定义在 contentType 中将触发 OPTIONS 标志而不是 POST .. 基本上它所做的是浏览器将发送一个带有 OPTIONS 标志的预请求，并根据服务器 HTTP 状态，它会发送真正的请求.. 这是因为我的后端服务器不允许跨源请求..这就是我遇到这些问题的原因..我找到了一个临时允许跨源的 chrome 扩展..这解决了我的问题..

这是该 chrome 扩展的链接

Link to chrome extension

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

我的情况是我开发了前端并有API来发出请求..但是我的后端，我没有开发它..所以源很远..在生产环境中，我所有的文件都会被合并在服务器中.. 但是现在，为了测试，我需要使用这个扩展来处理我的 API..

【问题讨论】：

请将您的答案添加为答案，如果确实解决了您的问题，请接受它，以便将此问题正确标记为已回答

你可以在任何地方尝试heroku cors

【参考方案1】：

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

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

  event.preventDefault();
);

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

【参考方案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;
   );

【讨论】：

对不起，我在 jquery 中有一个 return 语句，我忘了提...

我更改了代码 - 您应该将其作为事件侦听器而不是作为自己的函数。

【参考方案3】：

不要提交表单然后发出 Ajax 请求。使表单按钮不是提交类型，只需从它的 onclick 中调用 Ajax。

或者，如果你想减少工作量，只需将表单操作更改为某个空闲值“javascript://”，这样在提交事件上实际上只会将 ajax 请求发送到服务器：

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

【参考方案4】：

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

【讨论】：

欢迎来到 ***！感谢您的回答，您可能想为您的答案添加更多解释。乍一看，您的答案与原始问题中的代码非常相似。

【参考方案5】：

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

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

【参考方案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)
        
    );

【参考方案7】：

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

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

    alert(json);

  , 'json');

);

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

【参考方案8】：

您不能在 post 或 get 请求中使用 http 协议，您必须将文件的路径放在服务器上的目录中，而不发出外部请求，尝试从您的请求 POST 中删除 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)
        
   );

【讨论】：

您是在谈论使用 POST 还是 GET 的 ajax 请求？还是一般 POST '$.post()' 和 GET '$.get()'？

您是在谈论使用 POST 还是 GET 的 ajax 请求？还是一般 POST '$.post()' 和 GET '$.get()'？

任何 post 或 get 请求都不允许您输入操作 url “http”，因为它不安全，想象一下您可以将请求发送到仅知道它的任何 url。您只需要将目录放在服务器中，但我不知道这是否是您唯一的问题。

感谢您回复我。但以前我正在研究 openweatherapi.. 那次我使用 HTTP 从服务器获取请求.. 它工作正常没有问题。甚至有关 Ajax json 请求的其他一些答案也使用 HTTP。这就是我问你的原因..因为现在我很困惑。

【参考方案9】：

尝试从数据中删除 JSON.stringify()。 $.ajax( 类型：'POST'， 网址：'http://192.168.52.166:6000/api/2/users/login/', 数据类型：'json'， 数据：对象， contentType : '应用程序/json', 成功：函数（数据） 警报（数据） );

【讨论】：

在回答时尝试格式化您的答案。