ajax 基础

基础数据格式

ajax  基础

 

 

 

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

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

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

4) 发送 HTTP 请求

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

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

 

ajax  基础

 

 

  源码:

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: ajax  基础       ajax  基础

 

 

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> 简写: ajax  基础

 append是追加的意思

 

上一篇:跨域


下一篇:laravel7 ajax软删除