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" }
    ]

    效果

  • 相关阅读:
    minSdkVersion maxSdkVersion targetSdkVersion target 的区别
    C++实现DNS域名解析
    2018-2019-2 《网络对抗技术》Exp9 Web安全基础 20165114
    2019年课程设计本小组第一周——20165114
    2018-2019-2 20165114《网络对抗技术》 Exp 8 Web基础
    2018-2019-2 20165114《网络对抗技术》Exp7 网络欺诈防范
    2018-2019-2 20165114《网络对抗技术》Exp6 信息收集与漏洞扫描
    2018-2019-2 20165114《网络对抗技术》Exp5 MSF基础应用
    2018-2019-2 20165114《网络对抗技术》Exp4 恶意代码分析
    2018-2019-2 20165114《网络对抗技术》Exp3 免杀原理与实践
  • 原文地址:https://www.cnblogs.com/dshvv/p/5577260.html
Copyright © 2011-2022 走看看