Question

我的Web应用程序上有一个页面，我试图通过AJAX POST创建一个Person对象。我需要发送API端点期望的JSON格式为：

registerFormat( 'image', {
selector: 'img',
attributes: {
    url: {
        source: 'attribute',
        attribute: 'src',
    },
},
edit: class ImageFormatEdit extends Component {
    constructor() {
        super( ...arguments );
        this.state = {
            modal: false;
        };
    }

    openModal() {
        this.setState( { modal: true } )
    }

    closeModal() {
        this.setState( { modal: false } )
    }

    render() {
        const { insertObject } = this.props;

        return (
            <Fragment>
                <InserterItems>
                    <InserterItem
                        icon="inline-image",
                        title={ __( 'Inline Image' ) }
                        onClick={ openModal }
                    />
                </InserterItems>
                { this.state.modal && <MediaUpload
                    type="image"
                    onSelect={ ( { id, url, alt, width } ) => {
                        this.closeModal()
                        insertObject( {
                            src: url,
                            alt,
                            class: `wp-image-${ id }`,
                            style: `width: ${ Math.min( width, 150 ) }px;`,
                        } );
                    } }
                    onClose={ this.closeModal }
                    render={ ( { open } ) => {
                        open();
                        return null;
                    } }
                /> }
            </Fragment>
        );
    }
},
} );

使用此HTML标记可以轻松实现：

{
    "categoryId": "string",
    "name": "string",   
}

，然后仅序列化要与<form id="form"> <input name="categoryId" value="..." type="hidden" /> <input name="name" type="text" /> <button type="submit">Create</button> </form>一起传递的数据

问题是我的要求已更改，我需要发送其他信息-有关Person的子项。 API端点现在期望这样：

$('#form').serialize()

我不确定应该如何格式化HTML标记以适应此情况。我可以在多个文本框中设置{ "categoryId": "string", "name": "string", "aliases": [ { "aliasName": "string", "position": 0 }, { "aliasName": "string", "position": 0 }, { "aliasName": "string", "position": 0 }] }和name="aliasName"，但是如何将它们组合在一起并在父name="position"下呢？

Answer 1

您可以尝试使用jquery-serialize-object

以下示例：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
      var json = JSON.stringify($("#my-form").serializeObject());
      console.log(json);
      //alert(json);
      $("#divId").text(json);
    });
});
</script>
</head>
<body>

<form action="" name="my-form" id="my-form">
  some ID: <input type="text" name="someId" value="1"><br>
  First name: <input type="text" name="user[0][FirstName]" value="Mickey1"><br>
  Last name: <input type="text" name="user[0][LastName]" value="Mouse1"><br>
   First name: <input type="text" name="user[1][FirstName]" value="Mickey2"><br>
  Last name: <input type="text" name="user[1][LastName]" value="Mouse2"><br>
  <div id="divId"></div>
</form>

<button>Serialize form values</button>

<div></div>

</body>
</html>

CDN：

https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js

Stackoverflow问题类似行：

Convert form data to JavaScript object with jQuery

希望有帮助。

如何序列化表单数据以包括子集合？

1 个答案: