Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

通过jquery,从json中读取数据追加到html中

1.下载安装jquery

可通过下面的方法引入在线版本的js:

<script src=”<https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js>”></script>

参考安装文档:http://www.runoob.com/jquery/jquery-install.html

2.准备一个json格式的文件,后缀可以不是.json

例如下面是result.json的格式

{ “title”:”【UI测试结果】-转转2017/1/23 14:47″, “starttime”:”2017/1/23 15:00 45″, “endtime”:”2017/1/23 15:01 42″, “passcount”:10, “failurecount”:5, “resultinfo”:[ { “name”:”发布”, “moudle”:”Publish”, “pass”:”true”, “onecepass”:”true”, “log”:”true” }, { “name”:”登录”, “moudle”:”Login”, “pass”:”false”, “onecepass”:”true”, “log”:”asserterrorlog”, “failurereason”:{ “errorlog”:”asserterror”, “errorimg”:”./登录.jpg” } } ]}

3.通过$.getJSON获得Json文件的数据

例如下面的例子:读取result.json文件的内容,存储到result变量中,结果是一个json格式

$.getJSON(‘./result.json’,function(result){}

4.通过【$(‘#元素id’).after(html内容);】将html内容添加到定位到的元素后面

元素定位方式

$(“#id”):定位到id,

$(“p”):定位到标签p,其他标签同理

$(“.class”):定位到class

插入html内容位置:

  • append() – 在被选元素的结尾插入内容
  • prepend() – 在被选元素的开头插入内容
  • after() – 在被选元素之后插入内容
  • before() – 在被选元素之前插入内容

Json数据的操作

JSON对象[key]来读取内容:result[‘title],或者用result.”title”

数组的对象值,可以通过$.each来获得数据:

$.each(JSON数组对象,function(遍历索引i,遍历对象){操作遍历的对象})

读取result.json,追加html的代码如下

(jquery需要写在<script>标签内)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script src="<https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js>"></script>

<script>

$(document).ready(function(){

//使用getJSON方法读取json数据,

//注意:info.json可以是不同类型文件,只要其中的数据为json类型即可

   $.getJSON('./result.json',function(result){

      var html_title='';

      var html_resultinfo='';

 

 html_title += '<b>'+result["title"]+'</b>';

 $('#resultitle').after(html_title);

 $.each(result["resultinfo"],function(i,item){

    if(item["pass"]=="true") {

        html_resultinfo += '<tr><td>' + item['name'] + '</td>' +

                '<td>' + item['moudle'] + '</td>' +

                '<td>' + item["pass"] + '</td>' +

                '<td>' + item['onecepass'] + '</td>' +

                '<td id="' + item['moudle'] + '" class="collapsed" onclick="collapsedisplay(' + item['moudle'] + ')"><u style="color: blue;">展开</u></td></tr>';

                html_resultinfo +='<tr id="' + item['moudle'] + 'info" class="collapsedinfo" style="display:none"><td colspan="5">' + item['log'] + '</td></tr>';

    }

$('#infotitle').after(html_resultinfo);//after方法:在每个匹配的元素之后插入内容。

    });

});

 

</script>

</HEAD>

<BODY>

<div style="margin-top: 30px">

    <div style="font-size: 30px;text-align: center">

        <p id="resultitle" ></p>

    </div>

    </div>

    <div id="resultinfo" style="clear: both;padding-top: 30px">

        <table style="width: 1080px">

            <tr id="infotitle">

                <th style="width:360px">用例名称</th>

                <th style="width:200px">模块名称</th>

                <th style="width:180px">是否成功</th>

                <th style="width:180px">一次成功</th>

                <th style="width:160px">详情</th></tr>

        </table>

    </div>

</div>

</BODY>

Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Ajax和getJSON获取后台普通Json数据和层级Json数据解析</title>  
    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            //方式一 Ajax方式获取Json数据  
            $.ajax({  
                url: 'jsondata.ashx?type=1',  
                type: 'GET',  
                dataType: 'json',  
                timeout: 1000,  
                cache: false,  
                beforeSend: LoadFunction, //加载执行方法    
                error: erryFunction,  //错误执行方法    
                success: succFunction //成功执行方法    
            })  
            function LoadFunction() {  
                $("#list").html('加载中...');  
            }  
            function erryFunction() {  
                alert("error");  
            }  
            function succFunction(tt) {                  
                var json = eval(tt); //数组     
                var tt = "";  
                $.each(json, function (index) {  
                    //循环获取数据    
                    var Id = json[index].id;  
                    var Name = json[index].name;  
                    var Age = json[index].age;  
                    var Score = json[index].score;  
                    tt += Id + "___" + Name + "___" + Age + "___" + Score + "<br>";  
                });  
                $("#list").html('');  
                $("#list").html(tt);  
            }  
  
            //方式二 Json方式获取数据  
            $.getJSON(  
                "jsondata.ashx?type=1",  
                function (data) {  
                    //循环获取数据    
                    var tt = "";  
                    $.each(data, function (k, v) {  
                        $.each(v, function (kk, vv) {  
                            tt += kk + ":" + vv + "___";  
                        });  
                        tt += "<br/>";  
                    });  
                    $("#list2").html(tt);  
                }  
            );  
  
            //方式三 Ajax方式获取Json层级数据  
            $.ajax({  
                url: 'jsondata.ashx?type=3',  
                type: 'GET',  
                dataType: 'json',  
                timeout: 1000,  
                cache: false,  
                beforeSend: LoadFunction1, //加载执行方法    
                error: erryFunction1,  //错误执行方法    
                success: succFunction1 //成功执行方法    
            })  
            function LoadFunction1() {  
                $("#list3").html('加载中...');  
            }  
            function erryFunction1() {  
                alert("error");  
            }  
            function succFunction1(tt) {  
                var json = eval(tt); //数组     
                var tt = "";  
                $.each(json, function (index) {  
                    //循环获取数据    
                    var Id = json[index].id;  
                    var Name = json[index].name;  
                    var Age = json[index].age;  
                    var Score = json[index].score;  
                    tt += Id + "___" + Name + "___" + Age + "___";  
                    $.each(Score, function (k, v) {  
                        tt += k + ":" + v + "___";  
                    })  
                    tt += "<br/>";  
                });  
                $("#list3").html('');  
                $("#list3").html(tt);  
            }  
  
            //方式四 Json方式获取层级数据  
            $.getJSON(  
                "jsondata.ashx?type=3",  
                function (json) {  
                    //循环获取数据    
                    var tt = "";  
                    $.each(json, function (index) {  
                        //循环获取数据    
                        var Id = json[index].id;  
                        var Name = json[index].name;  
                        var Age = json[index].age;  
                        var Score = json[index].score;  
                        tt += Id + "___" + Name + "___" + Age + "___";  
                        $.each(Score, function (k, v) {  
                            tt += k + ":" + v + "___";  
                        })  
                        tt += "<br/>";  
                    });  
                    $("#list4").html('');  
                    $("#list4").html(tt);  
                }  
            );  
        });  
    </script>  
</head>  
<body>  
    <p>方式一</p>  
    <ul id="list">  
    </ul>  
    ____________________________________  
    <p>方式二</p>  
    <ul id="list2">  
    </ul>  
    ____________________________________  
    <p>方式三</p>  
    <ul id="list3">  
    </ul>  
    ____________________________________  
    <p>方式四</p>  
    <ul id="list4">  
    </ul>  
</body>  
</html>  
<%@ WebHandler Language="C#" Class="jsondata" %>  
  
using System;  
using System.Web;  
using System.Web.Script.Serialization;  
using System.IO;  
using System.Text;  
using System.Collections;  
using System.Collections.Generic;  
using System.Data;  
using Newtonsoft.Json;  
  
public class jsondata : IHttpHandler {  
  
    public void ProcessRequest(HttpContext context)  
    {  
        context.Response.ContentType = "text/plain";  
        context.Response.Cache.SetNoStore();  
        string type = context.Request["type"];  
        if (type=="1") //普通数据  
        {  
            List<Dictionary<String, String>> aa = new List<Dictionary<string, string>>();  
            for (int i = 0; i < 6; i++)  
            {  
                Dictionary<String, String> aaa = new Dictionary<string, string>();  
                aaa.Add("id", "no" + i);  
                aaa.Add("name", "张三" + i);  
                aaa.Add("age", "21");  
                aaa.Add("score", "1001");  
                aa.Add(aaa);  
            }  
            string json = JsonConvert.SerializeObject(aa, Formatting.Indented);  
            context.Response.Write(json);  
        }  
        if (type == "3") //层级数据  
        {  
            List<Student> list = new List<Student>();  
            for (int i = 0; i < 6; i++)  
            {  
                Student a = new Student();  
                a.id = "no" + i;  
                a.name = "张三" + i;  
                a.age = "21";  
                  
                Dictionary<string, string> dic = new Dictionary<string, string>();  
                dic.Add("语文","80");  
                dic.Add("数学", "81");  
                dic.Add("英语", "83");  
                dic.Add("生物", "89");  
                dic.Add("化学", "90");  
                dic.Add("物理", "95");  
                a.score = dic;  
                list.Add(a);  
            }  
            string json = JsonConvert.SerializeObject(list, Formatting.Indented);  
            context.Response.Write(json);  
        }          
    }  
  
    public struct Student  
    {  
        public string id;  
        public string name;  
        public string age;  
        public Dictionary<string,string> score;  
    }  
  
    public bool IsReusable  
    {  
        get  
        {  
            return false;  
        }  
    }  
}  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>Ajax和getJSON获取后台普通Json数据和层级Json数据解析</title>  
    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function () {  
            //方式一 Ajax方式获取Json数据  
            $.ajax({  
                url: 'jsondata.ashx?type=1',  
                type: 'GET',  
                dataType: 'json',  
                timeout: 1000,  
                cache: false,  
                beforeSend: LoadFunction, //加载执行方法    
                error: erryFunction,  //错误执行方法    
                success: succFunction //成功执行方法    
            })  
            function LoadFunction() {  
                $("#list").html('加载中...');  
            }  
            function erryFunction() {  
                alert("error");  
            }  
            function succFunction(tt) {                  
                var json = eval(tt); //数组     
                var tt = "";  
                $.each(json, function (index) {  
                    //循环获取数据    
                    var Id = json[index].id;  
                    var Name = json[index].name;  
                    var Age = json[index].age;  
                    var Score = json[index].score;  
                    tt += Id + "___" + Name + "___" + Age + "___" + Score + "<br>";  
                });  
                $("#list").html('');  
                $("#list").html(tt);  
            }  
  
            //方式二 Json方式获取数据  
            $.getJSON(  
                "jsondata.ashx?type=1",  
                function (data) {  
                    //循环获取数据    
                    var tt = "";  
                    $.each(data, function (k, v) {  
                        $.each(v, function (kk, vv) {  
                            tt += kk + ":" + vv + "___";  
                        });  
                        tt += "<br/>";  
                    });  
                    $("#list2").html(tt);  
                }  
            );  
  
            //方式三 Ajax方式获取Json层级数据  
            $.ajax({  
                url: 'jsondata.ashx?type=3',  
                type: 'GET',  
                dataType: 'json',  
                timeout: 1000,  
                cache: false,  
                beforeSend: LoadFunction1, //加载执行方法    
                error: erryFunction1,  //错误执行方法    
                success: succFunction1 //成功执行方法    
            })  
            function LoadFunction1() {  
                $("#list3").html('加载中...');  
            }  
            function erryFunction1() {  
                alert("error");  
            }  
            function succFunction1(tt) {  
                var json = eval(tt); //数组     
                var tt = "";  
                $.each(json, function (index) {  
                    //循环获取数据    
                    var Id = json[index].id;  
                    var Name = json[index].name;  
                    var Age = json[index].age;  
                    var Score = json[index].score;  
                    tt += Id + "___" + Name + "___" + Age + "___";  
                    $.each(Score, function (k, v) {  
                        tt += k + ":" + v + "___";  
                    })  
                    tt += "<br/>";  
                });  
                $("#list3").html('');  
                $("#list3").html(tt);  
            }  
  
            //方式四 Json方式获取层级数据  
            $.getJSON(  
                "jsondata.ashx?type=3",  
                function (json) {  
                    //循环获取数据    
                    var tt = "";  
                    $.each(json, function (index) {  
                        //循环获取数据    
                        var Id = json[index].id;  
                        var Name = json[index].name;  
                        var Age = json[index].age;  
                        var Score = json[index].score;  
                        tt += Id + "___" + Name + "___" + Age + "___";  
                        $.each(Score, function (k, v) {  
                            tt += k + ":" + v + "___";  
                        })  
                        tt += "<br/>";  
                    });  
                    $("#list4").html('');  
                    $("#list4").html(tt);  
                }  
            );  
        });  
    </script>  
</head>  
<body>  
    <p>方式一</p>  
    <ul id="list">  
    </ul>  
    ____________________________________  
    <p>方式二</p>  
    <ul id="list2">  
    </ul>  
    ____________________________________  
    <p>方式三</p>  
    <ul id="list3">  
    </ul>  
    ____________________________________  
    <p>方式四</p>  
    <ul id="list4">  
    </ul>  
</body>  
</html>  
<%@ WebHandler Language="C#" Class="jsondata" %>  
  
using System;  
using System.Web;  
using System.Web.Script.Serialization;  
using System.IO;  
using System.Text;  
using System.Collections;  
using System.Collections.Generic;  
using System.Data;  
using Newtonsoft.Json;  
  
public class jsondata : IHttpHandler {  
  
    public void ProcessRequest(HttpContext context)  
    {  
        context.Response.ContentType = "text/plain";  
        context.Response.Cache.SetNoStore();  
        string type = context.Request["type"];  
        if (type=="1") //普通数据  
        {  
            List<Dictionary<String, String>> aa = new List<Dictionary<string, string>>();  
            for (int i = 0; i < 6; i++)  
            {  
                Dictionary<String, String> aaa = new Dictionary<string, string>();  
                aaa.Add("id", "no" + i);  
                aaa.Add("name", "张三" + i);  
                aaa.Add("age", "21");  
                aaa.Add("score", "1001");  
                aa.Add(aaa);  
            }  
            string json = JsonConvert.SerializeObject(aa, Formatting.Indented);  
            context.Response.Write(json);  
        }  
        if (type == "3") //层级数据  
        {  
            List<Student> list = new List<Student>();  
            for (int i = 0; i < 6; i++)  
            {  
                Student a = new Student();  
                a.id = "no" + i;  
                a.name = "张三" + i;  
                a.age = "21";  
                  
                Dictionary<string, string> dic = new Dictionary<string, string>();  
                dic.Add("语文","80");  
                dic.Add("数学", "81");  
                dic.Add("英语", "83");  
                dic.Add("生物", "89");  
                dic.Add("化学", "90");  
                dic.Add("物理", "95");  
                a.score = dic;  
                list.Add(a);  
            }  
            string json = JsonConvert.SerializeObject(list, Formatting.Indented);  
            context.Response.Write(json);  
        }          
    }  
  
    public struct Student  
    {  
        public string id;  
        public string name;  
        public string age;  
        public Dictionary<string,string> score;  
    }  
  
    public bool IsReusable  
    {  
        get  
        {  
            return false;  
        }  
    }  
}  

转载请保留出处!:精品信息聚合网--只聚合精品信息 » Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

评论 0

评论前必须登录!

登陆 注册