Question

我正在尝试生成如下的JSON对象，

{"project":{"name":"test name","description":"test description","identifier":"testid",{"custom_fields":[{"value":"2015-12-01","id":4},{"statr":"2015-12-31,"id":5}]},stack":"Java","enabled_module_names":["issue_tracking","time_tracking"],"tracker_ids":["1","2","3"]}}

当前代码生成除下面这部分之外的所有内容，

{"custom_fields":[{"value":"2015-12-01","id":4},{"value":"2015-12-31,"id":5}]}

单词值不会改变，也应该将输入值设为日期格式， id也是常量。

    $(document).ready(function(){
      
       $.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return {"project":o};
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});

<div class="row">
    
    <div class="col-lg-12">
        <form role="form">
          
            <div class="form-group">
                <label>Name &nbsp;</label>
                <input class="form-control" placeholder="Name" name="name">
            </div>
            
            <div class="form-group">
                <label>Description</label>
                <textarea class="form-control" rows="6" name="description"></textarea>
            </div>

            <div class="form-group">
                <label>identifier &nbsp;</label>
                <input class="form-control" placeholder="Identifier" name="identifier">
            </div>
          
            <div class="form-group">
                <label>Start Date &nbsp;</label>
                <input type="date">
            </div>
            <div class="form-group">
                <label>End Date &nbsp;&nbsp;</label>
                <input type="date">
            </div>
           
            <div class="form-group">
                <label> Stack &nbsp;</label>
                <select class="form-control" name="stack">
                  <option value="Java">Java</option>
                  <option value="Php">Php</option>
                  <option value="Ruby">Ruby</option>
                  <option value="C#">C#</option>
                  <option value="Python">Python</option>
                  <option value="Pearl">Pearl</option>
                  <option value="JavaScript">JavaScript</option>
                  <option value="Objective-C">Objective-C</option>
                </select>
            </div>

            <div>
            <label>Modules</label>
                <label class="checkbox-inline" name="modules">
                  <input type="checkbox" id="inlineCheckbox1" name="enabled_module_names" value="issue_tracking"> Issue Tracking
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="enabled_module_names" value="time_tracking"> Time Tracking
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" name="enabled_module_names" value="gantt"> Gant
                </label>
            </div>

            <label>Trackers</label>
                <label class="checkbox-inline" >
                  <input type="checkbox" id="inlineCheckbox1" name="tracker_ids" value="1"> Bug
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="tracker_ids" value="2"> Feature
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" name="tracker_ids" value="3"> Support
                </label>
            
            <div class="butn" style="margin-left: 15px; margin-top: 10px;top: 10px; position: relative;">
            <button type="submit" id="submit" class="btn btn-default">Submit Button</button>
            <button type="reset" class="btn btn-default">Reset Button</button>
            </div>
        </form>
    </div>
    <pre id="result"></pre>
</div>

在所有其他输入中，此代码捕获输入的名称和输入的值。我试图得到上面提到的JSON对象，是否有可能。请指教。

Answer 1

使用以下功能可以获取表单中的所有数据。如果你想要一个递归定义 - 我建议添加内部表单。

var data = {}; 
$('form').find('input').each(function(){
    var name = $(this).attr('name');
    var value = $(this).val();
    data[name] = value;
});

生成自定义JSON数组

1 个答案: