1.json的获取

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


具体代码:

 <script>
		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);
			alert(xhttp.responseText);//将数据弹框	
		};
		xhttp.open("GET", "http://10.140.160.64:3000/servers", true);
		xhttp.send();
 </script>  

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里具体的取值。

具体代码:

<script>
		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 table = document.getElementById("TITANRelease");
					var tr = table.insertRow(1);
					tr.className="gradeX";
					tr.insertCell(0).innerText=note[key].TITANRelease;
					tr.insertCell(1).innerText=note[key].RAPCell;
					tr.insertCell(2).innerText=note[key].multiRAP;
					tr.insertCell(3).innerText=note[key].titanmain;
					tr.insertCell(4).innerText=note[key].oam;
					tr.insertCell(5).innerText=note[key].redis;	
					tr.insertCell(6).innerText=note[key].iphyUte;	
				}
			}
		};
		xhttp.open("GET", "http://10.140.160.64:3000/servers/titan-releases", true);
		xhttp.send();
 </script> 

这里的方法是:遍历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)); //动态的创建选项,并添加
        }
    }
};

效果:


GitHub 加速计划 / js / json
19
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:4 个月前 )
f06604fc * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :page_facing_up: bump the copyright years Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me> Signed-off-by: Niels Lohmann <niels.lohmann@gmail.com> 28 天前
d23291ba * add a ci step for Json_Diagnostic_Positions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * Update ci.cmake to address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typo in the comment Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix typos in ci.cmake Signed-off-by: Harinath Nampally <harinath922@gmail.com> * invoke the new ci step from ubuntu.yml Signed-off-by: Harinath Nampally <harinath922@gmail.com> * issue4561 - use diagnostic positions for exceptions Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> * address review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci check failures for unit-diagnostic-postions.cpp Signed-off-by: Harinath Nampally <harinath922@gmail.com> * improvements based on review comments Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix const correctness string Signed-off-by: Harinath Nampally <harinath922@gmail.com> * further refinements based on reviews Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add one more test case for full coverage Signed-off-by: Harinath Nampally <harinath922@gmail.com> * ci check fix - add const Signed-off-by: Harinath Nampally <harinath922@gmail.com> * add unit tests for json_diagnostic_postions only Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_diagnostics Signed-off-by: Harinath Nampally <harinath922@gmail.com> * fix ci_test_build_documentation check Signed-off-by: Harinath Nampally <harinath922@gmail.com> --------- Signed-off-by: Harinath Nampally <harinath922@gmail.com> 28 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐