ajax 基础

基础数据格式

 

 

 

1) 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象

2) 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

3) 设置响应 HTTP 请求状态变化的函数

4) 发送 HTTP 请求

5) 获取异步调用返回的数据

6) 使用 JavaScript 和 DOM 实现局部刷新

 

 

 

  源码：

window.onload=function(){

    var repuset=new XMLHttpRequest();

    repuset.open("get","01data.json");

    repuset.onreadystatechange=function(){

    if(repuset.status===200 && repuset.readyState===4){

        console.log(repuset.responseText);

        var data=JSON.parse(repuset.responseText);

       console.log(data);

    }

         }

    repuset.send();

               }

jq方式调用ajax：

       

 

 

 

 

 源码：

script部分：

  $(function(){

 //  创建 jquery 对象,也就是创建一个异步调用对象

        $.ajax({

            method:"get",

            // method 调用方式     get/post

            url:"01data.json",        // 调用ajax位置

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

            // data:"id=1001&name=zhangsan",

            contentType:"json",       // 返回数据格式

            success:function(data){console.log(data)

            if(data.status===200){

                var cls=data.data;

                $(".data lengend").text(cls.name);

                var students=cls.student;

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

                    const stu=students[i];

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

                }

            }else{

                console.log(data.msg);

            }

            },

            // 成功信息

            error:function(res,err){console.log(res)}

            // 错误信息  res是属性  err提示信息

        })

    })

html部分：

<legend></legend>

<table class="data">

    <th>id</th>

    <th>name</th>

</table>

简写：

 append是追加的意思