从网址上获取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>

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

 1 <script src="/jquery-1.11.1.min.js"></script>
 2 <script>
 3         function chuangjian(data, parentid, gen)
 4         {
 5             for (var i = 0; i < data.length ; i++) {
 6                 if (data[i].ParentID == parentid) {
 7                     var br1 = document.createElement("br");
 8                     gen.appendChild(br1);
 9                     var para = document.createElement("span");
10                     var node = document.createTextNode(data[i].Name);
11                     para.id = data[i].NewsSortID;
12                     var img1 = document.createElement("img");
13                     img1.id = data[i].NewsSortID + ",img";
14                     if (data[i].NewsSortID > 10) {
15                         img1.src = "1.png";
16                     }
17                     else
18                     {
19                         img1.src = "2.png";
20                     }
21                     img1.onclick = function (img1) {
22                         var spanid1 = img1.srcElement.getAttribute("id");
23                         var shuzu1 = spanid1.split(',');
24                         var spanid = shuzu1[0];
25                         var spanparent = document.getElementById(spanid);
26                         if (img1.srcElement.getAttribute("src") == "1.png") {
27                             img1.srcElement.setAttribute("src", "2.png");
28                             bianli(data, spanid, spanparent);
29                         }
30                         else {
31                             img1.srcElement.setAttribute("src", "1.png");
32                             var childList = spanparent.childNodes;
33                             var len = childList.length;
34                             for (var j = 1; j < len ; j++) {
35                                 //childList[j].setAttribute("hidden", "true")
36                                 $(childList[j]).fadeOut("slow");
37                                 //spanparent.removeChild(childList[j]);
38                             }
39                         }
40                     };
41                     if (data[i].NewsSortID > 10) {
42                         img1.style.marginLeft = "100px";
43                     }
44                     para.appendChild(node);
45                     gen.appendChild(img1);
46                     gen.appendChild(para);
47                     chuangjian(data,data[i].NewsSortID,para);
48                 }
49             }
50         }
51         function bianli(data, parentid, gen) {
52             var childList = gen.childNodes;
53             var len = childList.length;
54             for (var j = 1; j < len ; j++) {
55                 //childList[j].setAttribute("hidden", "true")
56                 $(childList[j]).fadeIn("slow");
57                 //spanparent.removeChild(childList[j]);
58             }
59         }
60 </script>

 

转载于:https://www.cnblogs.com/huhu583/p/5520050.html