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

时间:2012-07-01 20:25:47

标签: javascript jquery ajax json

您好我需要在JSON对象中构建数据并通过ajax帖子作为String发送。

我需要发送以下格式的内容:

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

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

基于以上所述,我可以访问item1,item2和item3数据 - 这是非表单数据。我需要将它添加到JSON对象。我想我可以做到这一点。但我的问题是,我需要将表单中的数据添加到此JSON对象中。

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

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

我是如何使用JSON / jQuery等来做到这一点的?

2 个答案:

答案 0 :(得分:0)

您可以尝试使用this question中的serializeObject函数将表单数据检索为对象。然后,您可以将非表单数据添加到该对象。

可能类似以下内容:

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

答案 1 :(得分:0)

将对象构建为对象,然后将其字符串化。自己将JSON字符串串起来要比以后串字化要困难得多。

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

试试这个:

HTML (简单形式)

<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定义不能只是一个对象,而不是一个存在纯粹是为了容纳内部对象的数组吗?似乎没有必要,但也许你的数据结构比你所展示的更多。