js 从后台获取json并动态的push
json
适用于现代 C++ 的 JSON。
项目地址:https://gitcode.com/gh_mirrors/js/json

·
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)); //动态的创建选项,并添加
}
}
};
效果:




适用于现代 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 天前
更多推荐
所有评论(0)