JSON对象的应用(MVC设计模式)

A)什么是Json对象?

Json对象是由花括号包起来以键值对形式纯在的数据的集合。

如:var Json = { name : 宋 ,sex : 男 };

Json对象我们大家都见过,控制器返回到页面的一条数据就是Json对象,如果返回的是表格就是Json对象数组。例如:var Jsons = [{name : 宋 ,sex : 男},{ name : 宋 ,sex : 男}]

其中name与sex就是该对象的键,可以通过键(如:name)访问到与之对应的值(如:宋)。

以下列举几种访问Json对象的方式:

① Json[name],由此可见Json对象的键就与数组的索引一样,只是这里是索引比较特殊,索引直接在Json对象内显示出来,而数组的索引是不会在数组内部显示出来,数组中储存的只是一个一个值,索引是按顺序默认的。

Json.name,由此可见Json对象就与C#中的类一样,可以通过类点出类中的某个字段来访问。

③ 循环遍历Json对象(下面在进行讲解)。

B) 页面上创建Json对象与应用。

如何在页面上获取键与值创建Json对象?

  1. 首先我们了解一下html的自定义属性:在标签内可以自定义的创建特点的属性并且可以赋予与之对应的属性值。

  2. 我们在了解一下jQuery的属性选择器:可以通过属性名或属性名与属性值选择到与之匹配的标签。

通过以上两点说明:我们可以通过给想要获取的标签设置一个共同的属性,然后在通过jQuery的属性选择器获取到这些给予了共同属性的标签。

//传递表单ID  属性名 属性值
function FormPropertySelect(FormID, propertyName, propertyValue) {
    var arry = {};  //创建Json对象
    var check = $("#" + FormID + " [" + propertyName + "=" + propertyValue + "]");
    if (check.length > 0) {
        for (var i = 0; i < check.length; i++) {  
            var name =  $(check[i]).attr("name");
            var value = $(check[i]).val().trim();
            arry[name] = value; //把获取到的键与值存入json对象
        }
    }
    return arry; //返回
}

① 我们先定义一个方法接收3个参数,ID,属性名,属性值。(ID只是把匹配的内容局限在某一块)。

② 创建一个空的Json对象。

③ 匹配到与之相对的标签。

④ 判断是否有标签匹配到。也就是判断获取的标签长度大于0。

⑤ 循环遍历这些标签。

⑥ 我们的name值一般与数据库字段对应,所以我们通过attr(“name”)获取到name值为我们的键。

⑦ 由于是文本框下拉框之类的标签,我们通过val()获取到值并且去空格。(当然如果我们用的是div之类的双标签我们可以用html()获取,当然我们要不然都是表单标签要不然都是普通标签,不能两者一起。如果想要一起,可以通过获取tagName来判断,如何改写可以参考数据回填的代码。)

⑧ 把键与值保存到Json对象中。

⑨ 返回Json对象。

如何应用?

个人比较喜欢表单提交(利用插件无需拼接URL进行提交),但是每次都要写一大堆获取来判断某些数据不为空字符,这样神烦。

有了这个方法我就可以把需要判断不为空的字段添加自定义属性。然后调用方法,得到返回的Json对象,进行循环遍历判断不为空。

  var Guset = FormPropertySelect("Form", "value_2", "one");
                    var Bool = true;
                    for (var x in Guset) {
                        if (Guset[x] == "") {
                            Bool = false;
                        }
                    }

① 声明一个变量接收返回的Json对象。

② 声明一个bool值。初始值为真。

③ 循环遍历。这里的a其实就是每一次的键。在用上面的第一种访问方式访问值。判断是否等于空字符。如果等于就把bool值赋为假,并且停止循环。如果不等于就进行下一次循环。

④ 经历循环之后真还是真就说明都不为空字符,真如果变成假就有字段为空字符。

扩展:我们的提交方法可以拼接url进行提交数据。那么我们其实可以循环拼接字符串。

上面我说到通过jq选择器自定义属性与其属性值获取,这次我们可以只通过自定义属性获取。

//传递表单ID  属性名
function FormPropertySelect_Name(FormID, propertyName) {
    var arry = {};  //创建Json对象
    var check = $("#" + FormID + " [" + propertyName + "]");
    if (check.length > 0) {
        for (var i = 0; i < check.length; i++) {
            var name = $(check[i]).attr("name");
            var value = $(check[i]).val().trim();
            arry[name] = value; //把获取到的键与值存入json对象
        }
    }
    return arry; //返回
}

这样就可以只通过表单id与属性名进行获取键与值。
循环拼接url

var url = "InsertGuset?"; //控制器方法名
var GusetTable = FormPropertySelect_Name("Form", "value_2");
for (var y in GusetTable) {
    url += y + "=" + GusetTable[y] + "&";
} //拼接url
url = url.substring(0, url.length - 1);    //截取掉最后一个&

–宋心成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值