原生Ajax请求参数

首先先写一个json文件声明内容

{

// 先判断是否是200
// 获取数据
// 返回数据

    "status":200,

    "data":{

        "name":"Web",

        "student":[

            {"id":1001,"name":"张三"},

            {"id":1002,"name":"李四"},

            {"id":1003,"name":"王五"}

        ]

    },

    "msg":"错误信息"

}

第一个为原生的方法

<script>

        $(function(){

            //原生的Ajax

            // $.ajax({

            //     type:"get",

            //     //请求的地址

            //     url:"./data.json",

            //     // data:{id:1001},//请求参数

            //     //data:"id=1001&name=zhangsan",//请求参数application/x-www-form-urlencoded

            //     //contentType:"json",//请求参数的格式

            //     dataType:"json",//返回数据形式

            //     //成功时执行

            //     success:function (data){

            //         console.log(data);

            //         if(data.status===200){

            //             var cls=data.data;

            //             $("legend").text(cls.name);

 

            //             var students=cls.student;

            //             for (let index = 0; index < students.length; index++) {

            //                 const stu = students[index];

            //                 $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");

            //             }

            //         }else{

            //             console.log(data.msg);

            //         }

            //     },

            //     error:function(res){

            //         console.log(res);

            //     }

            // })

  })

还可以用另一种方法：

<script>

$(function(){

$.get("./data.json",function(data){

                if(data.status===200){

                        var cls=data.data;

                        $("legend").text(cls.name);

                        var students=cls.student;

                        for (let index = 0; index < students.length; index++) {

                            const stu = students[index];

                            $(".data tbody").append("<tr><td>"+stu.id+"</td><td>"+stu.name+"</td></tr>");

                        }

                    }else{

                        console.log(data.msg);

                    }

            })

            //url [data]  success  [dataType]

            //$.post()

  })

最后显示内容

body的内容：

<legend></legend>

    <table class="data">

        <thead>

            <td>id</td>

            <td>name</td>

        </thead>

        <tbody>

            <!-- <tr></tr> -->

        </tbody>

    </table>

<legend></legend>

    <table class="data">

        <thead>

            <td>id</td>

            <td>name</td>

        </thead>

        <tbody>

            <!-- <tr></tr> -->

        </tbody>

    </table>