zoukankan      html  css  js  c++  java
  • 关于ajax跨域请求API数据的一些问题

      一般来说我们使用jquery的ajax来跨域请求API数据的时候每次请求,就只能请求一组数据,而且当我们再次点击发送ajax请求的时候,新请求的数据会覆盖掉原来的数据,那么如何每次在请求的数据的时候,保留我们上次请求的数据呢?

      做法很简单,声明全局变量,把每次请求的数据,缓存起来,这样有两个好处,一个是减少http请求,降低交互事件,另一个是方便我们查询历史数据。

      下面是我们一般使用jquery发送ajax请求的代码片段:

     1 function testData(arg){
     2             $.ajax({
     3                 type:'get',//请求方式
     4                 url:'',//api地址
     5                 dataType:'jsonp',//使用jsonp来开始跨域
     6                 jsonpCallback:'Callback',//跨域需要的回调函数
     7                 success:function(data){
     8                     // 请求数据成功后的调用的函数
     9                     // data就是我们要获取的参数
    10                 }
    11             })
    12         }
    其实通过上面代码我们很容就能看出,我们每次调用方法,发送ajax请求,都会获得一组全新的数据,因为参数data是每发送一次的请求,就会携带一组新的数据给我们!这就是问题所在:

      那么我们对下面的代码进行改造:

     1 var items = {};
     2         var results = [];
     3         function testData(arg){
     4             $.ajax({
     5                 type:'get',//请求方式
     6                 url:'',//api地址
     7                 dataType:'jsonp',//使用jsonp来开始跨域
     8                 jsonpCallback:'Callback',//跨域需要的回调函数
     9                 success:function(data){
    10                     // 请求数据成功后的调用的函数
    11                     // data就是我们要获取的参数
    12                     // 一般API的结构是对象里面包含对象数组
    13                     // 那么首先我们先把我们想要的数据,以对象的形式的添加到数组中
    14                     results.push({
    15                         foo:data.foo,
    16                         bar:data.bar,
    17                         name:data.name
    18                     })
    19                     // 其次再把这个数组当成对象的属性,添加到一个空对对象中,这样就实现了数据的缓存
    20                     items = {
    21                         results:results
    22                     }
    23                 }
    24             })
    25         }
  • 相关阅读:
    C# 开发Chrome内核浏览器(WebKit.net)
    SQL 存储过程语句拼接愁人的时间类型
    Linux简介
    揭秘Node.js深受欢迎的原因
    6个强大的AngularJS扩展应用
    ElasticSearch NEST
    web中的各种打印方案
    配置问题总结
    leetcode -day29 Binary Tree Inorder Traversal & Restore IP Addresses
    HBase高速导入数据--BulkLoad
  • 原文地址:https://www.cnblogs.com/songdongdong/p/6474215.html
Copyright © 2011-2022 走看看