html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Document</title>
  6. </head>
  7. <style type="text/css">
  8.       *{margin: 0; padding: 0;list-style: none;}
  9. </style>
  10. <body>
  11.       <ul id="ul1">
  12.           <li></li>
  13.       </ul>
  14. </body>
  15.         <script type="text/javascript">
  16.         var oUl = document.getElementById('ul1');
  17.         var aLi = oUl.getElementsByTagName('li');
  18.         var iPage = 1; //因为有cpage这个参数 分页的作用
  19.  
  20.         var xhr = null;
  21.         try {
  22.             xhr = new XMLHttpRequest();
  23.         } catch (e) {
  24.             xhr = new ActiveXObject('Microsoft.XMLHTTP');
  25.         }
  26.             xhr.open('get','getPics.php?cpage='+iPage,true);
  27.  
  28.             xhr.send();
  29.  
  30.             xhr.onreadystatechange=function(){
  31.                   if(xhr.readyState===4){
  32.                       if(xhr.status===200){
  33.  
  34.                         var data = JSON.parse(xhr.responseText);
  35.                             // 遍历并创建一个img元素通过接口的数据调用，将其插入到li中
  36.                           for ( var i=0; i<data.length; i++ ) {
  37.                                 var oImg = document.createElement('img');
  38.                                 oImg.src = data[i].preview;
  39.                                 oImg.style.width = '225px';
  40.                                 oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';
  41.                                 aLi[i].appendChild( oImg );
  42.                                 // Cannot read property 'appendChild' of undefined  控制台报这个错误的原因是只有一个li，但是data.length的长度又不止一个，所以插入到后面时，发现没有li了可以多加几个li标签（data.length的长度决定加多少才不会报这个错），所以将 aLi[i]改成 aLi[0]，获取第零个元素，并插入到里面去，就可以在li元素里面插入全部的img，而不用查看后面的li元素的多少
  43.                           }
  44.  
  45.                       }else{
  46.  
  47.                      alert('调取失败'+xhr.status)
  48.                   }
  49.  
  50.                   }
  51.             }
  52.  
  53.         </script>
  54. </html>

php（跨域作用）

  1. <?php
  2. header('Content-type:text/html; charset="utf-8"');
  3.  
  4. /*
  5. API:
  6.     getPics.php
  7.  
  8.         参数
  9.         cpage : 获取数据的页数
  10. */
  11. $cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;
  12.  
  13. $url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;
  14.  
  15. $content = file_get_contents($url);
  16. $content = iconv('gbk', 'utf-8', $content);
  17.  
  18. echo $content;
  19.  
  20. ?>

不封装ajax 带url参数调用接口的更多相关文章

  1. js页面跳转，url带url参数解决方案

    今天,在做一个项目的时候,向后端发送了一个Ajax请求,后端返回了一个字符串,告诉我未登录.那么我需要跳转到登录页面,同时告诉登录页面,登录成功后,需要跳回的url.也就是标题所说,url中的一个参数 ...

  2. 齐博x1.3通用栏目名称及参数调用接口

    对于全站的频道可以使用下面的方法取出相应的栏目名称及参数http://qb.net/index.php/cms/wxapp.sorts.html注意,只需要把qb.net换成你的域名,cms 换成其它 ...

  3. thinkphp5 模板url标签 跟javascript ajax 的 url 参数 被莫名替换

    发现一个  thinkphp5 的小bug 我用的是 thinkphp5.0.24 版本 在模板标签里 原来的大U函数  被改成url 那么问题来了   在javascript里  这样写  标签很容 ...

  4. Python requests.post嵌套多层json参数调用接口

    #coding:utf-8 import requests,json #第一行注解的#coding:utf-8表示可以支持中文,不然代码里面有中文会报错 url = "http://xxx& ...

  5. AngularJs中url参数的获取

    前言: angular获取通过链接形式访问的页面,要获取url中的参数,就不能通过路由的方式传递获取了,使用原生js或者jquery,又显得比较麻烦,好在angular已经封装了获取url参数的方法, ...

  6. 用js 获取url 参数 页面跳转 ？ 后的参数

    记得之前在原来的公司写过这个东西,但是还是忘记怎么接住参数了,只知道怎么把id传过去! 问了身边的大佬 他首先推荐了我一个链接是别人写好的方法 附上链接地址:http://blog.csdn.net/ ...

  7. SpringCloud使用Feign调用其他客户端带参数的接口，传入参数为null或报错status 405 reading IndexService#del(Integer);

    SpringCloud使用Feign调用其他客户端带参数的接口,传入参数为null或报错status 405 reading IndexService#del(Integer); 第一种方法: 如果你 ...

  8. 使用httpClient调用接口,参数用map封装或者使用JSON参数,并转换返回结果

    这里接口用表存起来,标记请求方式,然后接受参数,消息或者请求参数都可以, 然后先是遍历需要调用的接口,封装参数,再分别调用get与post即可,没有微服务还是得自己写 //消息转发-获取参数中对应参数 ...

  9. js进阶解决浏览器缓存不能自动更新的问题（在ajax的url上带上一个参数，可以是日期，或者是随机数）（随机数Math.random）（取得日期的毫秒数：new Date().getTime();）

    js进阶解决浏览器缓存不能自动更新的问题(在ajax的url上带上一个参数,可以是日期,或者是随机数)(随机数Math.random)(取得日期的毫秒数:new Date().getTime();) ...

随机推荐

  1. tomcat之一：指定tomcat运行时JDK版本

    tomcat作为日常开发的web应用服务器,给开发测试带来了很多便利,tomcat的运行依赖JDK的支持,在安装JDK时经常会配置环境变量:JAVA_HOME.CLASSPAT,且需要添加path变量 ...

  2. php实现设计模式之 中介者模式

    <?php /* * 中介者模式:用一个中介对象来封装一系列的对象交互,使各对象不需要显式地相互引用从而使其耦合松散,而且可以独立地改变它们之间的交互 */ /* * 以一个同学qq群为例说明, ...

  3. AbpKernelModule

    PreInitialize IocManager.AddConventionalRegistrar(new BasicConventionalRegistrar()); 增加BasicConventi ...

  4. [转载]T-SQL(MSSQL)语句查询执行顺序

    注意:笔者经过实验和查阅资料,已在原作基础上做了部分更改.更改不代表原作观点,查看原作请点击下方链接. 原文出处: 作者:张龙豪 链接:http://www.cnblogs.com/knowledge ...

  5. NSMutableString 常用操作

    //字符串的创建 //在可变字符串中 空字符串就有意义 NSMutableString *mString = [[NSMutableString alloc]init]; NSLog(@"m ...

  6. IOS开发基础知识--碎片9

    1:两种方法删除NSUserDefaults所有记录 //方法一 NSString *appDomain = [[NSBundle mainBundle] bundleIdentifier]; [[N ...

  7. Android内存泄漏

    Java是垃圾回收语言的一种,其优点是开发者无需特意管理内存分配,降低了应用由于局部故障(segmentation fault)导致崩溃,同时防止未释放的内存把堆栈(heap)挤爆的可能,所以写出来的 ...

  8. 自定义ViewGroup须知

    自定义ViewGroup须知: 1.必须复写onMeasure和onLayout方法,根据容器的特性进行布局设计 2.复写onMeasure方法必须处理父布局设置宽或高为wrap_content情况下 ...

  9. Github+hexo绑定域名

    Github绑定域名 近期在新网购买了一个属于自己的域名,因此想着把自己用hexo+github搭建的博客通过域名访问,但是找了n长时间来搞,都没有成功.心灰意冷之中再次通过google来搜索,终于有 ...

  10. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...