[JQuery] JQ 的AJAX方法 单层/双层JSON

单层

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>json  单层</title>
 6         <script src="../framework/official/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
 7     
 8     </head>
 9     <body>
10         
11         <input type="button" class="ajaxbutton" value="ajax获取数据内容" />
12         <input type="button" class="getjsonbutton" value="getjson获取数据内容"/>
13         <ul></ul>
14         
15         <script type="text/javascript">
16             $(function(){
17                 $(".ajaxbutton").on('click',function(){
18 //                    $.ajax获取数据
19                     $.ajax({
20 //                        要求为String类型的参数，（默认为当前页地址）发送请求的地址。
21                         url:"new_file.txt",
22 //                        要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
23 //                        xml：返回XML文档，可用JQuery处理。
24 //                        html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
25 //                        script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
26 //                        json：返回JSON数据。
27 //                        jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
28 //                        text：返回纯文本字符串。
29                         dataType:"json",
30 //                        要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
31                         type:"GET",
32 //                        data:{optionKey:2},
33                         success:function(data){
34 //                            i表示在data中的索引位置，n表示包含的信息的对象 
35                             $.each(data,function(i,n){
36                                 $("ul").append(n["optionValue"]+"<br />");
37                             })
38                         },
39 //                        要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
40                         error:function(msg){
41                             
42                         }        
43                     });
44                 })
45 //                getjson获取数据
46                 $(".getjsonbutton").on("click",function(){
47                     $.getJSON("new_file.txt",function(data){
48                         $.each(data,function(index,ceshi){
49                             
50                                 $("ul").append(ceshi["optionKey"]+"<br />");
51                             
52                         })
53                     })
54                 })
55             })
56         </script>
57     </body>
58 </html>

双层

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>实例ajax加载测试------多种JSON</title>
        <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
        <script src="../framework/official/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    
    </head>
    <body>
        <div class="container">
            <div class="col-md-12">
                <table class="table table-striped">
                <caption>实例ajax加载测试</caption>
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>臧三    </td>
                        <td>12</td>
                        <td>男</td>
                    </tr>
                </tbody>
            </table>
            </div>
             <input type="button" class="btn btn-default btn1" value="$.get获取数据" />
             <input type="button" class="btn btn-default btn2" value="$.ajax获取数据" />
        </div>
        <script type="text/javascript">
            
            //jq的.get方法获取json 数据
            $(".btn1").click(function(){
                $.get("ajax_1.json",function(data,status){
                        for(var i=0;i<data.text.length;i++){
                            $("tbody").append(" <tr><td>"+data.text[i].name+"</td><td>"+data.text[i].year+"</td><td>"+data.text[i].sex+"</td></tr>")
                        }
                })
            });
            //jq的ajax方法
                $(".btn2").on('click',function(){
//                    $.ajax获取数据
                    $.ajax({
//                        要求为String类型的参数，（默认为当前页地址）发送请求的地址。
                        url:"ajax_1.json",
//                        要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
//                        xml：返回XML文档，可用JQuery处理。
//                        html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
//                        script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
//                        json：返回JSON数据。
//                        jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
//                        text：返回纯文本字符串。
                        dataType:"json",
//                        要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
                        type:"GET",
//                        data:{optionKey:2},
                        success:function(data){
//                            i表示在data中的索引位置，n表示包含的信息的对象 
                            for(var i=0;i<data.text.length;i++){
                                $("tbody").append(" <tr><td>"+data.text[i].name+"</td><td>"+data.text[i].year+"</td><td>"+data.text[i].sex+"</td></tr>")
                            }
                        },
//                        要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
                        error:function(msg){
                            
                        }        
                    });
                })
            </script>
    </body>
</html>

JSON文件格式

[ 
{"optionKey":"1", "optionValue":"Canon in D"}, 
{"optionKey":"2", "optionValue":"Wind Song"}, 
{"optionKey":"3", "optionValue":"Wings"} 
] 
{
    "text": [
        {
            "name": "张三",
            "year": "15",
            "sex":"nan"
        }, {
            "name": "李四",
            "year": "55",
            "sex":"nv"
        }, {
            "name": "王彪",
            "year": "15",
            "sex":"nan"
        }, {
            "name": "龙舟",
            "year": "256",
            "sex":"nan"
        }

    ]

}

 

posted @ 2017-07-16 23:49  熊一乐  阅读(1037)  评论(0)    收藏  举报