通过请求不同的url返回Json对象并在前端显示的解决方法

最新推荐文章于 2020-09-30 11:01:56 发布

Hank_Chan

最新推荐文章于 2020-09-30 11:01:56 发布

阅读量4k

点赞数

分类专栏： JavaScript 文章标签： json 前端

本文链接：https://blog.csdn.net/Hank_Chan/article/details/51131028

版权

通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。
话不多说，上代码。

<html>
<head>
<meta charset="UTF-8">
<title>返回JSON对象表格</title>
<script type="text/javascript">
    var selectSuffix;
    var list;
    function loadJsonDoc(){
    
        getList();
        var suffix = getSelectVal();
        var index = location.href.lastIndexOf("/");
        var urlPrefix = location.href.substring(0, index + 1);
        var url = urlPrefix + suffix;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange=function(){
    
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var jsonText = xmlhttp.responseText;
                //获取Json对象
                JSONObject = eval("(" + jsonText + ")"); //不使用var声明，就算再function体内，只要执行过就成为全局变量
                //根据输入条件获取参数并输出数据
                //document.getElementById("text").innerHTML = document.write(jsonText);
                print(list);
            }
        }
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
    function getList(){
    
        list = document.getElementById("recent").value;
        return list;
    }
    function getSelectVal(){
    
        selectSuffix = document.getElementById("selectQuery").value;
        return selectSuffix;
    }
    function print(a){
    
        //定义获取Json对象
        document.write("<br><a href='success.html'>返回</a>");  //返回查询首页
        document.write("<table border='1' cellpadding='0' cellpadding='10'>"  
                + "<tr>" 
                + "<th>" + "num" + "</th>" 
                + "<th>" + "key" + "</th>" 
                + "<th>" + "total" + "</th>" 
                + "<th>" + "min" + "</th>" 
                + "<th>" + "max" + "</th>" 
                + "<th>" + "average" + "</th>" 
                + "</tr>");
        var count = 0;
        for(var key in JSONObject.result){  //输出每个Json对象的信息
            var jVals = JSONObject.result;
            count++;
            document.write("<tr>" 
                    + "<td>" + count + "</td>" 
                    + "<td>" + key + "</td>" 
                    + "<td>" + jVals[key].total + "</td>"  
                    + "<td>" + jVals[key].min + "</td>" 
                    + "<td>" + jVals[key].max + "</td>" 
                    + "<td>" + jVals[key].average + "</td>"  
                    + "</tr>");
            if(count == a){  //默认输出20条数据
                break;
            }
        }
        document.write("</table>");

    }
</script>
</head>
<body>

    <h2>Json Message</h2>
    <div id="text">
    <select id="selectQuery">
        <option value="all.json" onclick="getSelectVal()">all</option>
        <option value="batch.json" onclick="getSelectVal()">batch</option>
        <option value="image.json" onclick="getSelectVal()">image</option>
    </select>
    <form method="get">
        请输入查询条数: <input id="recent" type="text" name="recent" value=""/>
        <input type="submit" value="确认" onclick="loadJsonDoc()"/>
    </form>
    </div>
</body>
</html>

附上三个Json的页面数据：
all.json(已经做了格式化处理)页面如下：

{
    "elapsed": 5, 
    "result": {
        "Batch": {
            "total": 6, 
            "min": 46, 
            "max": 384, 
            "average": 200
        }, 
        "

最低0.47元/天解锁文章

Hank_Chan

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
通过请求不同的url返回Json对象并在前端显示的解决方法

通过请求不同的url返回Json对象并在前端显示的解决方法：这是最近学习前端的一个小demo，需求是：处理三个不同url的页面中的json对象信息，让用户通过在页面选择查询类型和查询条数就可以以表格形式显示相关的Json对象信息。话不多说，上代码
复制链接

扫一扫