如何结合表单数据构建 JSON 数据

How to build JSON data in combination with form data

本文关键字：数据 表单 构建 JSON 结合 何结合      更新时间：2023-09-26

嗨，我需要在 JSON 对象中构建数据并通过 ajax 帖子作为字符串发送。

我需要按以下格式发送内容：

{
 "myRequest": {
     "myRequestType": "updateStatus",
     "fields": [
         {
             "item1": "data1",
             "item2": "data2",
             "item3": "data3",
             "formUpdateField": "data4"
         }
     ]
 }
}

我有一个表单表，其中包含一个复选框，用于选择要为其发送更新的记录。 基本上，发送是更新记录的状态。

基于上述内容，我可以访问项目1，项目2和项目3数据 - 这是非表单数据。我需要将其添加到 JSON 对象中。我想我几乎可以做到这一点。但我的问题是，我还需要将表单中的数据也添加到此 JSON 对象中。

我能够将数据从表单中取出，但是如何将其添加到我正在构建的 JSON 对象中？

另一个问题是，您可以从表单表中选择多个记录

任何想法如何使用JSON/jQuery等来做到这一点？

将对象构建为对象，稍后将其字符串化。自己将 JSON 字符串字符串处理在一起比以后字符串化要困难得多。

如果您愿意仅支持现代浏览器，则可以利用 ECMA5 中提供的本机JSON.stringify()方法。如果没有，有很多第三方脚本可以做同样的事情。

试试这个：

网页（简单表单）

<form id='myForm'>
    <input type='text' name='foo' />
    <input type='text' name='bar' />
    <input type='checkbox' name='foobar' />
    <input type='submit' value='go'>
</form>

.JS

$(function() {
    //initialise object
    $('#myForm').on('submit', function() {
        var data = {
            myRequest: {
                myRequestType: 'updateStatus',
                fields: [{
                    item1: 'data1',
                    item2: 'data2',
                    item3: 'data3',
                    formUpdatedField: 'date4'
                }]
            }
        };
            //iterate over form fields and add each one in to our data
        $(this).find('input:not([type=submit]), select, textarea').each(function() {
            data.myRequest.fields[0][$(this).attr('name')] = $(this).val();
        });
            //do the request
        $.ajax({url: 'some/url.php', method: 'post', data: JSON.stringify(data)}).done(function() {
            //on success...
        });
        return false;
    });
});

这将迭代地将字段及其值附加到对象中，然后在将其作为 AJAX 请求的一部分发送时将其字符串化。

最后，你的fields定义难道不能只是一个对象，而不是一个纯粹是为了容纳内部对象的数组吗？似乎没有必要，但也许您的数据结构比您展示的要多。

您可以尝试使用此问题中的serializeObject函数将表单数据作为对象检索。然后，您可以将非表单数据添加到该对象。

也许像下面这样：

var data = $('form').serializeObject();
data.item1 = 'data1';
data.item2 = 'data2';
data.item3 = 'data3';
myJson.myRequest.fields = [data];
相关文章：