Question

解析表单上的每个输入以生成下面的Json对象的最佳方法是什么？我没有与自定义属性结合，如果是更简单的方法，请分享它。

   <form>   
    <label>Address</label>

       <input type="text" name="address" data-label="Address" data-group="partcipantInfo" data-column="dataBaseAddress" data-internalUse="1" data-userDefined="0" value="123 Acme Way"/>


     <label>City</label>

          <input type="text" name="City" data-label="City" data-group="partcipantInfo" data-column="dataBaseCity" data-internalUse="1" data-userDefined="1" value="Loony Tunes"/>

   <input type="submit"value="Submit" />
</form>

尝试为每个

获取此结果

{
   "inputs":[
      {
         "DataLabel":"Address",
         "DataGroup":"Address on Record",
         "DataColumn":"DataBaseAddress",
         "Value":"123 Acme Way",
         "InternalUse":true,
         "userDefined":false
      },
      {
         "DataLabel":null,
         "DataGroup":"Address on Record",
         "DataColumn":"dataBaseCity",
         "Value":"Loony Tunes",
         "InternalUse":true,
         "userDefined":true
      }
   ]
}

Answer 1

使用jQuery serializeArray（）方法：

var jsonData = $("form").serializeArray();

欲了解更多信息：

http://api.jquery.com/serializeArray/

Answer 2

相当简单：

var inputs = document.querySelectorAll('input[type="text"]');
var obj = {
  inputs : Array.prototype.map.call(inputs, function(input){
    return {
      DataLabel : input.getAttribute('data-label'),
      DataGroup : input.getAttribute('data-group'),
      DataColumn : input.getAttribute('data-column'),
      Value: input.value,
      InternalUse: !!+input.getAttribute('data-internalUse'),
      userDefined: !!+input.getAttribute('data-userDefined')
    }
  })
}

console.log(obj);

DEMO：http://jsbin.com/casazame/1/edit

注意：!!+是将'0'/'1'转换为false/true的简短方法。

从表单自定义属性动态创建JSON对象

2 个答案: