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

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

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

ajax回调函数ifelse,实现AJAX及用Promise解决回调函数命名问题
html代码: js代码: window.jQuery=function(){} window.jQuery.ajax = function({method, url, body, headers, ...
Ajax回调函数无反应及进erro问题记录。
一:问题描述 ajax回调函数,明明后台返回成功了,前端一直进Erro 二:问题反思 1.前端知识体系认知的不够完善.一直做后端的我,总感觉ajax套用模版就好,普通的模版,只有success,没写e ...
ajax 成功回调函数,jQuery的阿贾克斯成功回调函数定义jQuery的阿贾克斯成功回调函数定义(jQuery ajax...
我想使用jQuery的ajax从服务器获取数据. 我希望把成功的回调函数定义外面.ajax()块像下面这样. 所以,我需要声明变量dataFromServer像下面这样我就能从成功回调使用返回的数据? ...
ajax回调函数有时成功有时失败,javascript - Ajax 回调函数行为随机。我做错了什么？...
我有以下行为随机的 ajax 函数.有时会显示警报 success finally.在其他情况下,第二个警报是显示 Failure: my status is 500. promptId 从调用函数 ...
对ajax回调函数的研究
假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情 ...
【jquery】ajax 请求成功后新开窗口被拦截解决方法
问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢? 分析: 浏览器之所以 ...
ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
多个Ajax请求成功后再执行后续方法
经常会遇到需要ajax请求完毕后调用某方法,这次是多个ajax请求成功后,用它们返回的数据传参给回调方法,查询了一下,可以用jquery中的 $.when(),使用方法如下: $.when( $.aj ...
jQuery AJAX回调函数this指向问题
了解JavaScript的人都知道JavaScript的this不总是指向当前对象,函数或类中的this指向与调用这个函数的对象以及上下文环境是息息相关的.如在全局作用域调用一个含this的对象,此时 ...
ajax请求拦截窗口,ajax请求成功后新开窗口window.open()被拦截解决方法
ajax请求成功后新开窗口window.open()被拦截解决方法问题: 前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但 ...

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

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

最新文章

热门文章