Question

我使用了struts json插件并尝试将表单数据转换为json格式以通过ajax提交。

我在HTML中有两个案例

<form>
     <input type="text" name="user.name" value="Tom"></p>
     <input type="text" name="user.location" value="China"></p>
     <input type="text" name="user.data[0].id" value="993"></p>
     <input type="text" name="user.data[0].accountId" value="123"></p>
     <input type="text" name="user.data[1].id" value="222"></p>
     <input type="text" name="user.data[1].accountId" value="333"></p>
</form>

我期望将其转换为json结构：

{
   user : {
      name: "Tom",
      location : "China",
      data: [
         {
            id : 993,
            accountId : 123
         },
         {
            id : 222,
            accountId : 333
         }
      ]
   }
}

我知道如何声明json数据并逐个声明属性。

我希望有更好的方法，使用简单的方法使每个表单都是json格式，而不是以json格式逐个声明参数。

感谢任何建议或建议。谢谢。

Answer 1

如果您的表单完全相同

使用普通的JS方法

<form class="userform">
 <input type="text" class="username" value="Tom"></p>
 <input type="text" class="userlocation" value="China"></p>
 <input type="text" class="userid" value="993"></p>
 <input type="text" class="useraccountid" value="123"></p>
 <input type="text" class="userid2" value="222"></p>
 <input type="text" class="useraccountid2" value="333"></p>
</form>

然后将值分配给对象

var frm = document.getElementsByClassName('userform');

//initialize blank object and keys
var user = {},
  user.name = "",
  user.location = "",
  user.data = [];

//get all child input elements
for(var i = 0; i < frm.length; i++){
   var uname = frm[i].getElementsByClassName('username')[0];
   var uloc = frm[i].getElementsByClassName('userlocation')[0];
   var uid = frm[i].getElementsByClassName('userid')[0];
   var uaccid = frm[i].getElementsByClassName('useraccountid')[0];
   var uid = frm[i].getElementsByClassName('userid2')[0];
   var uaccid = frm[i].getElementsByClassName('useraccountid2')[0];

  //assign values to object here
  user[name] = {};    //assigning a parent property here, the name for example.
  user[name].name = uname.value;
  user[name].location = uloc.value;
  user[name].data.push({
    'id': uid.value
    'accountId': uaccid.value
  });
  user[name].data.push({
    'id': uid2.value
    'accountId': uaccid2.value
  });
}

JSON.stringify(user); //convert to JSON (or ignore if you want a plain object)

以JSON格式输出

{
   user :{
      Tom: {
            name: "Tom",
            data: [
               {
                 id : 993,
                 accountId : 123
               },
               {
                 id : 222,
                 accountId : 333
               }
            ]
      },

      Jerry: {
      //more data
      },

      Courage: {
      //more data
      }
   }
}

希望这有帮助

如果您的输入字段很多，例如id3，accountid3,4,5,6。您必须遍历分配给这两个重复字段的类

Answer 2

您可以使用<System> <Chip> <ChipName>Hxxxxxxx</ChipName> <Series>CM0+</Series> <Type>0</Type> <FlashAddress>00000000</FlashAddress> <PageCount>256</PageCount> <PageSize>512</PageSize> <RAMAdd>20000000</RAMAdd> <RAMLength>0x1800</RAMLength> <Crystals> <Crystal>4</Crystal> <Crystal>6</Crystal> <Crystal>8</Crystal> <Crystal>10</Crystal> <Crystal>12</Crystal> <Crystal>16</Crystal> <Crystal>18</Crystal> <Crystal>20</Crystal> <Crystal>24</Crystal> <Crystal>32</Crystal> </Crystals> </Chip> </System> https://jsfiddle.net/pnz8zrLx/2/

找到解决方案

jQuery

var json = {};

$('button').click(function(){
    $('form').each(function(i){
    json["user" + i] = {};
    json["user" + i].data = [];
    var tempJSON = {};
    $('form:nth-child(' + (i+1) + ') input[type="text"]').each(function(){
      if($(this).attr('name') === 'name' || $(this).attr('name') === 'location'){
        json["user" + i][$(this).attr('name')] = $(this).val();
      } else {

        tempJSON[$(this).attr('name')] = $(this).val();

        if(tempJSON != {} && $(this).attr('name') === 'accountId'){
          json["user" + i].data.push(tempJSON);
          tempJSON = {};
        }
      }
    });
  });

  console.log(json);
});

希望这会对你有所帮助。

如何以简单的方式将输入名称点转换为json格式？

2 个答案: