如何将数据从多个输入字段转换为单个 JSON 对象以进一步将其插入单个 mysql 字段

Posted 2023-05-09

【中文标题】如何将数据从多个输入字段转换为单个 JSON 对象以进一步将其插入单个 mysql 字段

【英文标题】：How to Convert Data From multiple input fields to a single JSON object to further insert it into single mysql field

【发布时间】：2019-08-21 17:29:51

【问题描述】：

我正在开发一个表单，用户将在其中插入有关产品的数据。我有一个带有产品名称的 mysql 表，它有 3 列，即 id、product_name 和属性。

现在问题出在属性上，我希望用户能够添加自己的属性和值，例如 Size = 3inche 和 weight=12kgs 等。

我设计了一个如下的表格。

    <form action="" method="post">
        <table>
            <tr><td><label for="">Product Name</label></td><td><input type="text" name="p_name"></td></tr>

        <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

        <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
        <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

        <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
        <tr><td colspan="2" align="center" ><input type="submit" name="submit" value="Submit"></td></tr>



        </table>
    </form>

所以基本上我想要的是$_POST['attributes'] 是返回一个属性数组，我应该能够将其转换为 JSON 对象。 JSON 对象应类似于 "'attribute'":"Size","'value'":"12" "'attribute'":"Weight","'value'":"10"。

之后，我会将 JSON 格式的数据插入到 mysql 表的字段属性中。我尝试了很多方法，但我只能检索到最后输入的一个属性。

我能得到一些帮助吗？

【参考方案1】：

虽然也可以在这里形成所需的数据，但是我已经按照当前的要求进行了编码，

这里是代码：

html

<form   action="" method="post">
    <table>
        <tr><td><label for="">Product Name</label></td><td><input type="text" name="p_name"></td></tr>

    <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

    <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
    <tr><td><label for="">Attribute</label></td><td><input type="text" name="attributes['attribute']"><br></td></tr>

    <tr><td><label for="">value</label></td><td><input type="text" name="attributes['value']"><br></td></tr>
    <tr><td colspan="2" align="center" ><input type="submit" name="submits"   value="Submit"></td></tr>



    </table>
</form>

只需将提交按钮名称更改为 submits 即：name="submits"

已添加 jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script>
$("[name='submits']").click((e)=>
    e.preventDefault();
$("input[type='text']").map(d=>
    if($($("input[type='text']")[d]).prop('name')!='p_name')
        $($("input[type='text']")[d]).prop('name',`attributes[$$($("input[type='text']")[d]).val()]` )
    
)
$("form").submit();
)
</script>

[d]).prop('name',attributes[$$($("input[type='text']")[d]).val()])

我使用了模板文字，即：“`”一个反引号