zoukankan      html  css  js  c++  java
  • 0-ajax操作json(番外篇)

    【可以先看后边再看此文】

    get获取json

    前端代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
            <title></title>
        </head>
        <body>
            <div >
                小丁的年龄是:<span id="dsh"></span>
            </div>
            <script type="text/javascript">
                $.ajax({   
                   type: "get",   
                   url:  "DB.json", 
                   datatype: "json",//"xml", "html", "script", "html", "jsonp", "text".
                   success: function (data,status) {
                       document.getElementById("dsh").innerHTML=data.teacher[1].age;
                       //var js=JSON.stringify(data);//转换成json字符串
                   },
                   error:   function (data,status) { alert("Ajax请求Json错误");}   
                 });  
            </script>
        </body>
    </html>

    DB.json

    { "student": [
    { "name": "王老师",  "age": "40" },
    { "name": "丁老师",  "age": "30" }
    ],
    "teacher": [
    { "name": "小王",  "age": "20" },
    { "name": "小丁",  "age": "10" }
    ] }

    效果

    html批量读取json

    html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
            <title></title>
        </head>
        <body>
            <script type="text/javascript">
                $.ajax({   
                   type: "get",   
                   url:  "DB.json", 
                   datatype: "json",//"xml", "html", "script", "html", "jsonp", "text".
                   success: function (data,status) {
                          document.writeln("学生:<br/>")
                           for (var x in data.student) {
                               document.writeln(data.student[x].name+data.student[x].age+"<br/>")
                           }
                           
                           document.writeln("<p/>老师:<br/>")
                           for (var x in data.teacher) {
                               document.writeln(data.teacher[x].name+data.teacher[x].age+"<br/>")
                           }
                   },
                   error:   function (data,status) { alert("Ajax请求Json错误");}   
                 });  
            </script>
        </body>
    </html>

    json

    { "student": [
    { "name": "小王",  "age": "10" },
    { "name": "小丁",  "age": "20" }
    ],
    "teacher": [
    { "name": "王老师",  "age": "30" },
    { "name": "丁老师",  "age": "40" }
    ] }

    效果

    项目实战

    html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
            <style type="text/css">
                table{border-collapse: collapse; width: 100%;}
                table tr td{border: red solid 1px;  width: 50%; text-align: center;}
            </style>
        </head>
        <body>
            <table>
            </table>
            <script type="text/javascript">
                $.ajax({   
                    type: "get",   
                      url:  "DB.json", 
                      datatype: "json",
                       success: function (data) {
                           for (var i=0; i<data.length; i++) {
                               $("table").append(
                                   "<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>"
                               )
                           }
                       },
                       error:function () { alert("Ajax请求Json错误");}
                   });
            </script>
        </body>
    </html>

    json

    [
    {"name": "小王",  "age": "10" },
    { "name": "小丁",  "age": "20" },
    { "name": "小红",  "age": "18" }
    ]

    效果

  • 相关阅读:
    Java中Runnable和Thread的区别
    Callable,Runnable比较及用法
    如何实现视差滚动效果的网页?
    【175】Easy CHM的使用
    【174】C#添加非默认字体
    【173】双显示器随便切换位置
    【172】outlook邮箱设置
    【171】IDL读取HDF文件
    怎样实现二级联动
    Java 23种设计模式详尽分析与实例解析之二--结构型模式
  • 原文地址:https://www.cnblogs.com/dshvv/p/5577260.html
Copyright © 2011-2022 走看看