ajax回调函数的使用；ajax请求成功后对数据的再次使用

最新推荐文章于 2024-06-06 14:23:51 发布

菜鸟-编程

最新推荐文章于 2024-06-06 14:23:51 发布

阅读量2.2w

点赞数 3

分类专栏： # js 文章标签： ajax ajax回调函数

本文链接：https://blog.csdn.net/qq_36161345/article/details/92604143

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<body>
   <a href="javascript:addContent()">展示</a>
   <table border="1" id="show"></table>

   <script type="text/javascript">
       /**
       * 数据展示
       */
       function addContent(){
            $("#show").html("");       //清空内容
           getData(setContentText);   //获取数据
       }

       /**
   * 设置数据到页面
   * data 数据
   */
   function setContentText(data){
       var tableContent = data;   //数据内容
       //数据文本添加到展示表格
      $("#show").append(tableContent);
   }

       /**
       * 获取数据
       * callback 回调函数
       */
       function getData(callback){
          var content = "<tr><td>id</td><td>name</td></tr>";
          $.ajax({
   url : "data.json",    //路径
   data:{},            //参数
   type:"get",           //请求方式
   //async:false,       //同步（默认为true，异步）
   dataType:"json",   //数据类型
   success : function(datas) {
       var data = datas.rows;   //数据集合
       //外层循环所有的对象，内层循环每个对象的属性
       for(var i = 0;i < data.length;i++){
           content += "<tr>";
           var item = data[i];
           content += "<td>" +item.id+"</td>";
           content += "<td>" +item.name+"</td>";
           content += "</tr>";
       }
       callback(content);   //通过回调函数获取处理后的数据
   },
   //异常
   error: function (XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
},
   //数据加载前
   beforeSend:function(){},
               //数据加载完成后
   complete:function(){}
           });
       }
   </script>
</body>

效果图：

data.json:

{
   "total":10,
   "rows":[
   {"id":"FI-SW-01","name":"Koi"},
   {"id":"K9-DL-01","name":"Dalmation"},
   {"id":"RP-SN-01","name":"Rattlesnake"},
   {"id":"RP-SN-01","name":"Rattlesnake"},
   {"id":"RP-LI-02","name":"Iguana"},
   {"id":"FL-DSH-01","name":"Manx"},
   {"id":"FL-DSH-01","name":"Manx"},
   {"id":"FL-DLH-02","name":"Persian"},
   {"id":"FL-DLH-02","name":"Persian"},
   {"id":"AV-CB-01","name":"Amazon Parrot"}
   ]
}

菜鸟-编程

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
ajax回调函数的使用；ajax请求成功后对数据的再次使用

<body> <a href="javascript:addContent()">展示</a> <table border="1" id="show"></table> <script type="text/javascript"> /** ...
复制链接

扫一扫