从网址上获取json并生成样式

前一阵子去一个公司面试，人家让我从一个网址上获取json，并且生成对应的折叠样式。

但是当时花了一下午时间都没有完成，后来面试果断黑了。

之后自己又花时间把这道题做出来。发现确实有很多实用的地方，所以发上来，使自己记得。

json数据的格式如下图:

ParentID是父结点，NewsSortID是当前结点，根结点为0

首先，要先从给出的网址上获取到json数据,化码如下

public partial class index : System.Web.UI.Page
    {
        private string pageUrl = "";
        public string shuju;
        protected void Page_Load(object sender, EventArgs e)
        {
            pageUrl = "";//这里是json的网址
            WebRequest wrequest = WebRequest.Create(pageUrl);
            WebResponse wresponse = wrequest.GetResponse();
            Stream resStream = wresponse.GetResponseStream();
            StreamReader sr = new StreamReader(resStream, Encoding.UTF8);
            //通过utf-8的格式获取网页的数据
            shuju = sr.ReadToEnd();
            resStream.Close();
            sr.Close();
        }
    }

通过使用WebRequest来获取到了json数据。

然后把数据传到前台，来使用js进行操作

<script>
            var a = '<%=shuju%>';
            var data = eval('(' + a + ')');//转换json格式
            var parentid = 0;
            var gen = document.getElementById("main");//确定插入地点
            chuangjian(data,parentid,gen);//主要实现函数
</script>

下面是主要实现函数，使用迭代实现。

<script src="/jquery-1.11.1.min.js"></script>
<script>
        function chuangjian(data, parentid, gen)
        {
            for (var i = 0; i < data.length ; i++) {
                if (data[i].ParentID == parentid) {
                    var br1 = document.createElement("br");
                    gen.appendChild(br1);
                    var para = document.createElement("span");
                    var node = document.createTextNode(data[i].Name);
                    para.id = data[i].NewsSortID;
                    var img1 = document.createElement("img");
                    img1.id = data[i].NewsSortID + ",img";
                    if (data[i].NewsSortID > 10) {
                        img1.src = "1.png";
                    }
                    else
                    {
                        img1.src = "2.png";
                    }
                    img1.onclick = function (img1) {
                        var spanid1 = img1.srcElement.getAttribute("id");
                        var shuzu1 = spanid1.split(',');
                        var spanid = shuzu1[0];
                        var spanparent = document.getElementById(spanid);
                        if (img1.srcElement.getAttribute("src") == "1.png") {
                            img1.srcElement.setAttribute("src", "2.png");
                            bianli(data, spanid, spanparent);
                        }
                        else {
                            img1.srcElement.setAttribute("src", "1.png");
                            var childList = spanparent.childNodes;
                            var len = childList.length;
                            for (var j = 1; j < len ; j++) {
                                //childList[j].setAttribute("hidden", "true")
                                $(childList[j]).fadeOut("slow");
                                //spanparent.removeChild(childList[j]);
                            }
                        }
                    };
                    if (data[i].NewsSortID > 10) {
                        img1.style.marginLeft = "100px";
                    }
                    para.appendChild(node);
                    gen.appendChild(img1);
                    gen.appendChild(para);
                    chuangjian(data,data[i].NewsSortID,para);
                }
            }
        }
        function bianli(data, parentid, gen) {
            var childList = gen.childNodes;
            var len = childList.length;
            for (var j = 1; j < len ; j++) {
                //childList[j].setAttribute("hidden", "true")
                $(childList[j]).fadeIn("slow");
                //spanparent.removeChild(childList[j]);
            }
        }
</script>