js 从后台获取json并动态的push

1.json的获取

 从前端发送json数据到后台已经在上一篇文章讲述了。从后台取数据的流程大概是：后台从数据库取出json的数据，然后将这个数据放在一个ip上，前端发送一个get请求给后台，后台允许后再去对应的ip取出数据。

具体代码：

2.json数据的动态push

2.1表格的运用

实例：我们都知道json是key+value的形式。所以经常会以表格的形式展示。尤其是数据很多时，表格是一个很好的选择。

这是一个空的表格的th，它里面的数据都需要实时的从后台取，实时的创建行。

数据库中数据的格式：

{
  
   "CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817":  {
    "TITANRelease":  "CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817",
     "oam":  "CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817",
     "redis":  "latest",
     "multiRAP":  "0",
     "iphyUte":  "latest",
     "titanmain":  "CBTS18_FSM4_MZ_0700_000306_TITAN_aa41817",
     "RAPCell":  "5"
  },
   "CBTS18_FSM4_MZ_0700_000296_TITAN_aa41817":  {
    "TITANRelease":  "CBTS18_FSM4_MZ_0700_000296_TITAN_aa41817",
     "oam":  "CBTS18_FSM4_MZ_0700_000296_TITAN_aa41817",
     "redis":  "latest",
     "multiRAP":  "0",
     "iphyUte":  "latest",
     "titanmain":  "CBTS18_FSM4_MZ_0700_000296_TITAN_aa41817",
     "RAPCell":  "5"
  }
}

可以看到，每个索引是类似版本号的东西，每次都会变。但是每个版本里的内容都一样。所以这个json的每个元素都是一个对象。而我们要push的是每个对象里的值。所以处理的方法是：遍历一遍json的key，再在这个key里具体的取值。

具体代码：

这里的方法是：遍历key时，就创建新的一行。在具体的列里加入每个key对应的数据。

效果：

2.2下拉框的运用

要求：从后台取到每个版本的版本号，展示在下拉框的选项里。

具体做法：json解析数据，每次获得一个数据，就新创建一个选项。

var xhttp = new XMLHttpRequest();
	xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // Typical action to be performed when the document is ready:	
        //alert(xhttp.responseText);
        var note = JSON.parse(xhttp.responseText);
        for (var key in note) {
			var select=document.getElementById("ver");//获取下拉框
			var option=note[key].TITANRelease;//中间变量，获取数值
            select.options.add(new Option(option,option)); //动态的创建选项，并添加
        }
    }
};

效果：