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

Question

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

javascriptjqueryjsonajax

23

首先我知道有很多相同标题的问题..我看到了很多东西，但到目前为止没有什么能解决我的问题。这就是为什么我打开这个问题的原因。

基本上我有两种情况： 1）在HTML表单中定义“action”和“method”。 2）在HTML表单中不使用“action”和“method”。

以下是第一种情况，

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 编码发送。表单的默认内容类型是 URL 编码，我知道这一点。所以现在我做的是，添加了 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值警报我表单字段的内容。但是当我像上面介绍的jQuery表单演示中使用它时，这个JSON字符串应该传输到服务器。但实际上它不是，而是作为urlencoded传递。

2）第二种情况与第一种相同，但这次没有表单的动作和方法。现在发生的是我的表单方法即使我在jQuery中提到了POST也会被视为GET。

注意：我使用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中提及POST，而不是在HTML表单中时，它无法工作。

以下是我在HTML表单中使用action和method时得到的结果。

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

3

好的，我会尽力满足您的要求。以下是需要翻译的内容：请在回答中添加您的答案，并在确实解决了您的问题后接受它，以便正确地标记此问题为已答复。 - Mark Schultheiss

你可以尝试使用Heroku CORS Anywhere。 - John

9个回答

0

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

- Shahid Ansari

欢迎来到Stackoverflow！感谢您的回答，您可能需要在您的回答中添加更多的解释。乍一看，您的答案看起来与原始问题中的代码非常相似。 - Dylan Watson

0

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

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

- Pranit Bhor

0

你需要将该函数改为事件监听器。

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

- nrhode

抱歉，我的 jQuery 中有一个返回语句，我忘记提到它了... - Em Ji Madhu

我修改了代码 - 你必须将其作为事件监听器而不是自己的函数来执行。 - nrhode

0

不要在提交表单后再发出Ajax请求。将表单按钮设置为非提交类型，只需从其onclick调用Ajax即可。

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

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

- Javier Rey

0

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)
        }
    });

- mohsinkhan93

0

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

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

    alert(json);

  }, 'json');

});

- Chenghan

3

虽然这段代码可能回答了问题，但提供关于它是如何解决问题的背景和/或原因，将有助于提高答案的长期价值。 - Piotr Labunski

-1

在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)
        }
   });

- Vladimir Salguero

你是在谈论使用 POST 还是 GET 发送 Ajax 请求吗？还是一般地，POST '$.post()' 和 GET '$.get()'？ - Em Ji Madhu

你是在谈论使用POST还是GET进行Ajax请求？或者一般来说，是指POST的'$.post()'和GET的'$.get()'吗？ - Em Ji Madhu

任何请求，无论是post还是get，都不允许您在操作url中输入"http"，因为这样做是不安全的。想象一下，如果您只知道URL，就可以向任何URL发送请求。您只需要放置服务器内部目录即可，但我不确定这是否是您唯一的问题。 - Vladimir Salguero

谢谢您的回复。但之前我正在使用openweatherapi..那时我使用HTTP从服务器获取请求..它没有任何问题地工作。甚至有些关于Ajax json请求的答案也使用HTTP。这就是为什么我问你的原因..因为现在我感到困惑。 - Em Ji Madhu

-3

尝试将JSON.stringify()从数据中删除。 $.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) } });

- Kameshwaran K

尝试将您的答案格式化，以便回答。Programming相关内容的翻译如下：Programming：编程Code：代码Syntax：语法Debugging：调试Algorithm：算法Function：函数Variable：变量Loop：循环Conditional statement：条件语句Object-oriented programming：面向对象编程Database：数据库API：应用程序接口Framework：框架IDE：集成开发环境Version control：版本控制Compile：编译Execute：执行Error message：错误信息Exception：异常Comment：注释String：字符串Integer：整数Float：浮点数Boolean：布尔值Array：数组List：列表Dictionary：字典 - Dipanshu Mahla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrea · Accepted Answer

你的代码是正确的。你只需要使用preventDefault()方法。

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

  event.preventDefault();
});

如果没有它，表单也会被浏览器提交。你报告的HTTP跟踪是关于浏览器正常提交而不是ajax调用的。