jQuery 表单数据存入 JSON

HTML

因为本人没用过jQuery，所以前期写了一堆事件，做了一些调试工作...

后边要使用到 name 做判断

HTML

JS

网页

注意：

radio 和 checkbox 中的 value 不止一个。

若要把多个数据填充给一个 key ，是需要使用数组存放数据的。

第一次写的时候没考虑到 radio 和 checkbox 的数据，就直接使用字符串赋值了。

后来调试的时候发现，不管多选框中选择多少个项， hobby 的 value 始终是最后一个 checkbox 的 value ....

使用数组，首先就要初始化对象。

因为使用 Array 对象的 push() 方法可以很方便的向后插入数据...

json格式包含有如下的基本类型 ： 数字，字符串，false, true, null

而由基本类型组成的复合类型有 ： 数组，对象；其中数组是以 [ ] 进行标记的，而对象是以 { } 进行标记

jq 这个命令用来处理json数据格式，非常方便，简单记录其常用的使用方法如下：

A. 对于数组的处理：

1). 如果 jq 要处理的json是 数组类型，那么用 “ jq .[ ] ” 可以将数组的最外层的[ ] 标记脱掉, 从而变成 对象 类型。

2). 上述命令的 中括号里面可以带有参数，这个参数就是 数组的下标，这个下标从前向后最小是 0，最大值没有限制，如果超出，那么就会return null. 同时支持下标从后向前基数，最小为-1. 但是参数的值除了数字，不可以是空格. 同时数组的下表支持 切片，也就是 [2:7] 或者 [1,2,5,7] 这种格式都是支持的.

B. 对于对象的处理：

1). 因为对象里面的每个元素都是 key:value的形式存在，虽然value 也可以是一个复合类型，但是不影响 key:value 这种格式，所以对于对象，通常用 jq .key 这种方式来获取对应key的value. 其中key 在这里可以不用引号括起来,当然也可以用引号括起来,反正key都是字符串类型。

2). 如果要获得对象所有元素的key值，那么要把 |keys 串接在对象后面，需要注意的是 这里不是利用的shell的管道，而是jq内置的管道，所以属于jq的参数的一部分. 例如：

其实 keys 属性不仅仅支持 对象，也支持json 数组，比如：

3). 判断是否存在某个key.

在上面利用jq内置的 keys 属性，可以获取所有的key, 其实还有jq内置的has 方法，这个方法可以判断对应的key是否存在. 例子如下：

4). jq 的查找结果避免输出 错误，转而输出null

在查找条件的后面加上一个问号，那么如果找不到就不会输出任何的error, 相应的输出一个null来替代. 这个问号可以加在方法的后面(后面的例子中可以看到)。这在递归查找的时候非常有用否则可能会出现报错的情形.

5). jq 的查找结果为空，避免输出null ,而是什么都不输出

目前不知道怎么实现，暂且用其他的linux 命令来过滤吧

6). 根据指定的关键字查找有该关键字的key，也就是模糊查找

jq 支持PCRE 正则表达式，所以支持模糊搜索， 这里主要展示用scan 方法输出模糊搜索的结果. 用法实例如下：

7). 根据指定的key, 查找嵌套对象中所有该key的value,输出该value

使用 .. 或者 recurse 来表示递归查找，然后通过管道进行常规的查找就可以了，举例如下：

8). 如何将匹配key 的 key 和value 一起进行输出?

以上的命令表示递归方式，获取Key为name的所有key:value对，并以key:value的方式进行输出，但是空的字典对象如何排除呢？ 目前还没有发现好的解决方法

9). 因为keys 属性支持对象的同时，也支持数组，所以如何来剔除数组而只是要对象的keys呢？

有一个walk 方法可以实现，但是不常用，所以这里不做讨论.

10).嵌套的模糊查找，上面描述了用scan进行模糊查找，以及用recurse来进行嵌套，如何两者结合呢？

因为scan方法只能够作用于字符串，所以不可以简单的将recurse和scan 结合起来使用，这里需要通过keys来实现 嵌套的模糊查询. 举例如下：

11). 其他使用小tips：

在可以使用 .key1.key2 这种情况下，也可以使用 .key1|.key2 的格式，个人更倾向于使用 .key1|.key2 ，因为看起来更清晰明了. 比如下面的例子.

在大多数情况下我们看到的json 复合格式最外层都是数组的形式，而不是对象的形式，这个是因为什么原因呢？ 因为json的对象必须是 key:value 的格式，虽然value 也可以是一个复合格式，但是一定需要key:value 形式，而 数组的不同元素的类型之间没有任何的关联，同一个数组，既可以包含有字符串元素，也可以包含对象元素，还可以包含数字... ，因此一个复合类型的 json格式一般最外层都是数组的形式.

首先用模糊查询,配合递归查找相应的key；-----简言之，就是找到key

然后用特定的key, 配合递归查询找到所有的结果；------简言之，就是依据key遍历到所有的值

最后对上述的结果做进一步的处理得到需要的结果.-----简言之，对得到的值做进一步的过滤获得真正需要的结果

简单例子如下下：

简单总结：

1.addJSONData和addRowData有点区别，后者是绑定在jquery对象的，前者是绑定在标签上的。

用addJSONData时举例：$("#table")[0].addJSONData(data)

用FF可以看到$("#table")[0]上绑定的事件的。

2.addJSONData接受的参数：

这是后台的.net代码

new JObject() {

new JProperty("total","1"),

new JProperty("page","1"),

new JProperty("records","3"),

new JProperty("rows",yourArrayData)

}

可以看到addJSONData接受的并不是一个数组，就是一个json对象，开始一直也困扰在这里。

前台返回的JSON：

{"total":"1","page":"1","records":"3","rows":[{"UserID":1,"UserName":"kp","Password":"123","Domain":null,"RoleID":null},{"UserID":2,"UserName":"kptest","Password":"Kp123","Domain":null,"RoleID":null},{"UserID":3,"UserName":"ricky","Password":"123","Domain":"XSUNT-SH\\dong.geng","RoleID":1}]}

3.还有一点需要注意的，jqgrid需要定义一个jsonReader其中的repeatitems如果不指定为false FF会返回obj is undefined

jsonReader: {

repeatitems: false,

rows: "rows",            

total: "total",

page: "page",

records: "records"

}

4.$("#table").addJSONData(data)的调用位置也值得注意，最后只有在loadComplete中才能加载出数据，gridComplete里不可以，方法外也不行。

---