如何将 HTML POST 数据转换为 JSON？

Question

  'recipient.firstName': 'Fred',
  'recipient.lastName': 'Johnson'

有什么优雅的方法可以把它变成：

var recipient = {
  firstName: 'Fred',
  lastName: 'Johnson
}

在前端使用 JS？我想 POST JSON，但使用 HTML 似乎不太容易完成，因此我想用 jQuery 拦截 POST 并将其格式化为我想要的 JSON。

编辑：为清楚起见，我将保留上面的原始问题，但如果您仔细阅读，您会发现我遇到的问题不是使用 AJAX 将数据发布到 REST API。这非常简单并且已经实现。正在发生的事情是，我正在使用我创建的模板引擎动态构建表单，并且构建表单 ID 和名称以表示嵌套数据，例如收件人.firstName。但是，当我收到作为 JSON 传递到 API 端点的数据时，我需要以编程方式将其从第一种格式转换为第二种格式，如果您仔细阅读，这就是问题的实际问题。很抱歉有任何混淆，我在下面列出的答案解决了这个问题。

Answer 1

通过使用serializeArray() 和forEach 和其他对象来使用带有表单的jQuery：

$(function() {
  var recipient = $("#frm").serializeArray();
  var output = {}; // Declare an object.

  recipient.forEach(function(v, i) {
    output[v.name] = v.value; // Assign the current value to the current key.
  });

  $.ajax({
    url: "http://httpbin.org/post",
    type: "POST",
    data: JSON.stringify(output), // Send the object.
    contentType: "application/json",
    success: function(response) {
      //console.log(response);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="frm" method="post">
  firstName:
  <br/>
  <input id="firstName" name="firstName" type="text" value="Fred" />
  <br />lastName:
  <br/>
  <input id="lastName" name="lastName" type="text" value="Johnson" />
  <br />age:
  <br/>
  <input id="age" name="age" type="text" value="30" />
</form>

在请求中，您发送：

Answer 2

这是我正在使用的：

_.forOwn(options, function(value, key) {
  if(key.indexOf('.') != -1){

    var split = key.split('.')

    if( !global[split[0]] ) {
      global[split[0]] = {}
    }

    global[split[0]][split[1]] = value
  }
});

使用global，因为我在后端使用 NodeJS。

目前看来有效，如果我最终使用它，我会回来报告。

Answer 3

var recipient = [{firstName: "Fred",lastName: "Johnson"}]
                //:: CONVERT TO JSON
                recipient = JSON.stringify(recipient);
                //:: POST THE DATA 
                $.post(LINK_url,{post_recipient : recipient },json/*:: json not important, it can be auto guessed. delete ',json' */,function(output){
                    //var data =jQuery.parseJSON(output);});

______________________________编辑_____________________________

如果这次我猜对了，你的输出是计划文本，你需要转换为 json，如果是这样，试试这个。

var recip = JSON.stringify[{ output }];
var data = jQuery.parseJSON(recip);
var viewdata='';
$.each(data, function(key, recipient){viewdata +=
recipient.firstName +" "+recipient.lastName+"<br/>"
})
prompt(viewdata);

Answer 4

更新

现在我知道你的服务器端是 NodeJs，你只需要学习如何调用 NodeJS 服务器端方法：

How to send data from JQuery AJAX request to Node.js server

所以你的方法是错误的，你有这个不必要的复杂数据字符串想要拦截。不要拦截任何东西，从一开始就使用 jQuery 或 Javascript 向您的服务器控制器或 API 发送格式良好的 HTTP POST。您的 API 方法的签名应该是：

DoSomethingWithRecipient(string firstName, string lastName);

您的收件人也应该有一个 userId，但这取决于您。如果您没有使用可以解析传入请求并将其映射到您的 DoSomethingWithRecipient 函数（如 PHP 或 ASP.NET）的服务器端框架，那么您很可能会无缘无故地重新发明轮子。

与使用 jQuery 相比，您只需像这样执行 Ajax HTTP Post：

var recipient = {
  firstName: 'Fred',
  lastName: 'Johnson'
}

var json = JSON.stringify(recipient);

$.ajax({
    url: '/MyUrl/DoSomethingWithRecipient',
    type: 'POST',
    dataType: 'json',
    data: json,
    contentType: 'application/json; charset=utf-8',
    success: function (data) {
    },
    error: function (result) {
    }
});