将 json 对象转换为表单序列化数据

Posted 2023-03-28

【中文标题】将 json 对象转换为表单序列化数据

【英文标题】：Convert json object to form-serialized data

【发布时间】：2020-12-19 21:16:24

【问题描述】：

我有这个包含 html 的对象：

obj = 
   amount: 0
   apply_business_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_business_delivery" id="apply_business_delivery"></div>"
   apply_private_delivery: "<div class="form-check"><input type="checkbox" checked class="form-check-input" name="apply_private_delivery" id="apply_private_delivery"></div>"
   bin: "<i class="far fa-trash-alt"></i>"
   service: "E-mail advisering"
   unit: "<div class="form-group"><select class="form-control form-control-sm select2" name="units" id="units"><option selected>Kr.</option><option >%</option></select></div>"

我能否以某种方式将这些值转换为表单序列化数据，以便更轻松地使用服务器端？例如，复选框应转换为0 或1（如果已选中）。

编辑： 想要我想要的是有一个像$('form').serializeArray() 一样的功能。我只是在弄清楚如何在 obj 上执行此操作时遇到问题。

例如 $('form').serializeArray() 转换这个 HTML：

<select class="form-control form-control-sm select2" name="company_name"
        id="company_name">
    <option>My company</option>
</select>
<select class="form-control form-control-sm select2" name="type"
        id="type">
    <option>Business</option>
</select>

到这里：

 "form" => array:2 [
    0 => array:2 [
      "name" => "company_name"
      "value" => "My company"
    ]
    1 => array:2 [
      "name" => "type"
      "value" => "Business"
    ]
  ]

这是我想要的结果：

obj = 
   amount: 0
   apply_business_delivery: [
      "name" => "apply_business_delivery"
      "value" => 1
   ]
   apply_private_delivery: [
      "name" => "apply_private_delivery"
      "value" => 1
   ]
   bin: ""
   service: "E-mail advisering"
   unit: [
      "name" => "units"
      "value" => "Kr."
   ]

【问题讨论】：

这能回答你的问题吗？ Query-string encoding of a javascript Object

@Ouroborus 它给了我这个：“0=%5Bobject%20Object%5D&1=%5Bobject%20Object%5D&2=%5Bobject%20Object%5D&3=%5Bobject%20Object%5D&4=%5Bobject%20Object %5D&5=%5Bobject%20Object%5D&6=%5Bobject%20Object%5D" 这不是我想要的结果。

@Unicco 你不需要使用encodeURIComponent(p)，如果你不使用“%20”，只需使用p.toString()。它应该大部分时间都可以工作。

@DominiqueFortin 嗯，它仍然不能像 serializeArray 那样很好地转换我的 HTML 标签。查看我更新的问题。

@Unicco 表单序列化格式用于 html 表单元素。如果您有无法放入 html 表单的复杂数据，那么您的想法就错了。也许看看JSON.stringify。

【参考方案1】：

这似乎对我有用

var res = $.fn.agGridSerializeRowData( gridFeeOptions.rowData );

/**
 *
 * @param agGridOption
 * @returns []
 */
$.fn.agGridGetAllData = function (agGridOption) 
    let rowData = [];
    agGridOption.api.forEachNode(node => rowData.push(node.data));
    return rowData;


/**
 *
 * @param rows
 * @returns []
 */
$.fn.agGridSerializeRowData = function (agGridOption) 
    let allFormsData = [];
    let rows = $.fn.agGridGetAllData(agGridOption);

    $.each(rows, function (i, rowObjects) 
        let obj = ;

        $.each(rowObjects, function (i, e) 
            if (/<\/?[a-z][\s\S]*>/i.test(e)) 
                obj[i] = $.fn.agGridSerializeHtml(e);
             else 
                obj[i] = e;
            
        );
        allFormsData.push(obj);
    );
    return allFormsData;
;

/**
 *
 * @param e
 * @returns 
 */
$.fn.agGridSerializeHtml = function( e ) 
    e = e || '';
    let allDataObject = ;
    let allHtmlDataTemp = ;

    if ( e !== '' ) 
        $( e ).find( 'input,select,textarea' ).each( function( i ) 
            allHtmlDataTemp[ i ] = $( this );
         );
     else 
        $( 'input,select,textarea' ).each( function( i ) 
            allHtmlDataTemp[ i ] = $( this );
         );
    

    $.each( allHtmlDataTemp, function( i ) 
        let $input = $( this );
        let eName;
        let eVal;

        if ( ($input.attr( 'type' ) === 'submit') ||
            ($input.attr( 'type' ) === 'button') ) 
            return true;
        

        if ( ($input.attr( 'name' ) !== undefined) && ($input.attr( 'name' ) !== '') ) 
            eName = $input.attr( 'name' ).trim();
         else if ( ($input.attr( 'id' ) !== undefined) && ($input.attr( 'id' ) !== '') ) 
            eName = $input.attr( 'id' ).trim();
         

        if ( $input.val() !== undefined ) 
            if ( ($input.attr( 'type' ) === 'radio') || ($input.attr( 'type' ) === 'checkbox') ) 
                eVal = $input.is(":checked");
             else 
                eVal = $input.val();
            
         else if ( $input.text() !== undefined ) 
            eVal = $input.text();
        

        if ( eVal === undefined || eVal == null ) 
            eVal = '';
        

        if ( eName !== undefined ) 
            let elementArr = [];
            if ( eName.indexOf( ' ' ) !== -1 ) 
                elementArr = eName.split( /(\s+)/ );
             else 
                elementArr.push( eName );
            

            $.each( elementArr, function( index, name ) 
                name = name.trim();
                if ( name !== '' ) 
                    allDataObject[ name ] = eVal;
                
             );
        
     );
    return allDataObject;
;

之前：

之后：