jQuery AJAX获取JSON数据解析多种方式示例

news/2024/7/10 23:16:31 标签: jQuery, AJAX, 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>

http://www.niftyadmin.cn/n/1870033.html

相关文章

JavaSE 结构介绍

JavaSE 结构介绍

javase结构如下图&#xff1a; jdk 主要包含了 java development tools 和 jre。 jre 主要包含了 javaSE 核心类库 和 jvm。 下面就是 javase 核心类库介绍&#xff0c;Java SE中包含的主要技术如下&#xff1a; Deployment Tecknologies: 和部署相关的技术 Deployment、Ja…
阅读更多...
Java 虚拟机内存模型

Java 虚拟机内存模型

笔记&#xff1a; 原文地址&#xff1a;http://blog.csdn.net/zapldy/article/details/7401063 我们知道&#xff0c;计算机CPU和内存的交互是最频繁的&#xff0c;内存是我们的高速缓存区&#xff0c;用户磁盘和CPU的交互&#xff0c;而CPU运转速度越来越快&#xff0c;磁盘远…
阅读更多...
jQuery插件的制作之方法的参数

jQuery插件的制作之方法的参数

1、无参数实现文字阴影效果 jQuery.fn.shadow function(){return this.each(function(){var $originalElement jQuery(this);for(var i 0;i < 5;i){$originalElement.clone().css({position :"absolute",left :$originalElement.offset().left i,top :$origina…
阅读更多...
另一个视角解读计算机编码-补码编码

另一个视角解读计算机编码-补码编码

这篇文章写得很好&#xff0c;转来供大家分享&#xff01; 数学是一个完全抽象的学科&#xff0c;而计算机是这个学科的一种形象化的实现&#xff0c;显然无法处理一些仅在抽象意义上有意义的特殊”数字“&#xff0c;比如无穷之类的东西。像数学中的加法&#xff0c;乘法这样运…
阅读更多...
jQuery插件开发全解析,jQuery.extend , (function($){ , $.fn.pluginName

jQuery插件开发全解析,jQuery.extend , (function($){ , $.fn.pluginName

序&#xff1a;匿名函数&#xff0c;匿名函数没有实际名字&#xff0c;也没有指针&#xff0c;怎么执行滴&#xff1f; 其实大家可以看看小括号的意义就应该可以理解。小括号有返回值&#xff0c;也就是小括号内的函数或者表达式的返回值&#xff0c;所以说小括号内的function返…
阅读更多...
JVM 指令集与 X86 等真实cpu指令集的异同

JVM 指令集与 X86 等真实cpu指令集的异同

1.函数调用指令集 x86 cpu 函数调用指令集 call ret 主要作用是保存现场和恢复现场&#xff0c;比如 cpu 寄存器压栈和弹栈&#xff1b; jvm 函数调用指令集 invokevirtual invokeinterface invokespecial invokestatic return .. 等等&#xff0c;由于 jvm 没有物理寄存器&a…
阅读更多...
$.extend(true,{},a,b)，深入理解，小心陷阱

$.extend(true,{},a,b)，深入理解，小心陷阱

$.extend一般情景下&#xff0c;使用深度拓展两个对象时&#xff0c;我们想要的效果是&#xff0c;b对象覆盖掉a对象中存在的所有属性&#xff0c;没有则新增到a对象中&#xff1b;下面我们看一下我所遇到的问题&#xff1a;我希望通过深度拓展将tmp中的editoption覆盖掉ret中的…
阅读更多...
Java 类反汇编命令

Java 类反汇编命令

可能大家平时用编译命令javac和解释命令java用得比较多&#xff0c;Java类反汇编程序的命令javap用得比较少。我们在命令行窗口先用javap -help看下javap工具支持的选项&#xff1a; D:/test>javap -help Usage: javap <options> <classes>... where options in…
阅读更多...
最新文章

Copyright @ 2022~2023