jQuery读取JSON总结

      

分类： jQuery              2011-02-21 16:01    5600人阅读     评论(1)    收藏    举报    

jsonjqueryfunctiontreestringemail

1.jQuery 部分

<script src="js/jquery.js" type="text/javascript"></script>
< script type="text/javascript">
    $(document).ready(function() {
        //alert("json");
        var user = { "UserID": 11, "Name": "Truly", "Email": "[e-mail]" };
        alert(user.UserID);
        alert(user["Name"]);
        //alert(user);
    }); //读取简单对象
    $(document).ready(function() {
        var user = { "UserID": 11, "Name": { "FristName": "Truly", "LastName": "Zhu" }, "Emali": "[e-mail]" };
        alert(user.Name.FristName);
        alert(user["Name"]["FristName"]);
    });
    $(document).ready(function() {
        var userList = [
        { "UserID": 11, "Name": { "FirstName": "Jerry", "LastName": "Tian" }, "Email": "address1" },
        { "UserID": 12, "Name": { "FirstName": "Jerry1", "LastName": "Tian" }, "Email": "address2" },
        { "UserID": 13, "Name": { "FirstName": "Jerry2", "LastName": "Tian" }, "Email": "address3" },
            ];
        alert(userList[0].Name.FirstName);
        alert(userList.length); //读取复杂对象
    });
< /script>

 

2.JSON部分

Json对象从后台传输可以使用WebServie asmx aspx多种方式

Json对象包含在[ ]中

Json数据变量名要用 ""

Json数据需要用{ }分割

前台调用代码如下 ：

  <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: "NavigateTree.asmx/GetJson",
                type: "POST",
                dataType: "json",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                success: function(json) {
                    alert(json.d);
                    var data = eval('(' + json.d + ')');
                    alert(data);
                    alert(data.length);
                    alert(data[0].showcheck);
                },
                error: function(x, e) {
                    alert(x.responsetText);
                    alert("Error");
                },
                complete: function(x) {
                    //alert(x.responseText);
                }
            });
        });
    </script>

后台代码如下

        [WebMethod]
        public static string GetJson()
        {
            string json = "[";
            List<tbNavigationTree> t = NaviagetTreeDlinqDAL.returnParetnTree();
            foreach (tbNavigationTree model in t)
            {
                if (model != t[t.Count - 1])
                {
                    json += GetJsonByModel(model) + ",";
                }
                else
                {
                    json += GetJsonByModel(model);
                }
            }
            json += "]";
            json=json.Replace("'","/"");
            return json;
        }
        public static string GetJsonByModel(tbNavigationTree t)
        {
            string json = "";
            bool flag = NaviagetTreeDlinqDAL.isHavingChild(t.ID);
            json = "{"
                + "'id':'" + t.ID + "',"
                + "'text':'" + t.ModuleName + "',"
                + "''value':'" + t.ID + "',"
                + "''showcheck':true,"
                + "'checkstate':'0',"
                + "'hasChildren':" + flag.ToString().ToLower() + ","
                + "'isexpand':false,"
                + "'ChildNodes':"; //ChildNodes C一定大写
            if (!flag)
            {
                json += "null,";
                json += "complete'';false}";
            }
            else
            {
                json += "[";
                List<tbNavigationTree> list = NaviagetTreeDlinqDAL.getChild(t.ID);
                foreach(tbNavigationTree tree in list)
                {
                    if (tree != list[list.Count - 1])
                    {
                        json += GetJsonByModel(tree) + ",";
                    }
                    else
                    {
                        json+=GetJsonByModel(tree);
                    }
                }
                json+="],'complete':true}";
            }
            return json;
        }