html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<style type="text/css">

      *{margin: 0; padding: 0;list-style: none;}

</style>

<body>

      <ul id="ul1">

          <li></li>

      </ul>

</body>

        <script type="text/javascript">

        var oUl = document.getElementById('ul1');

        var aLi = oUl.getElementsByTagName('li');

        var iPage = 1; //因为有cpage这个参数 分页的作用

        var xhr = null;

        try {

            xhr = new XMLHttpRequest();

        } catch (e) {

            xhr = new ActiveXObject('Microsoft.XMLHTTP');

        }

            xhr.open('get','getPics.php?cpage='+iPage,true);

            xhr.send();

            xhr.onreadystatechange=function(){

                  if(xhr.readyState===4){

                      if(xhr.status===200){

                        var data = JSON.parse(xhr.responseText);

                            // 遍历并创建一个img元素通过接口的数据调用，将其插入到li中

                          for ( var i=0; i<data.length; i++ ) {

                                var oImg = document.createElement('img');

                                oImg.src = data[i].preview;

                                oImg.style.width = '225px';

                                oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';

                                aLi[i].appendChild( oImg );

                                // Cannot read property 'appendChild' of undefined  控制台报这个错误的原因是只有一个li，但是data.length的长度又不止一个，所以插入到后面时，发现没有li了可以多加几个li标签（data.length的长度决定加多少才不会报这个错），所以将 aLi[i]改成 aLi[0]，获取第零个元素，并插入到里面去，就可以在li元素里面插入全部的img，而不用查看后面的li元素的多少

                          }

                      }else{

                     alert('调取失败'+xhr.status)

                  }

                  }

            }

        </script>

</html>

php（跨域作用）

<?php

header('Content-type:text/html; charset="utf-8"');

/*

API:

    getPics.php

        参数

        cpage : 获取数据的页数

*/

$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);

$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>

不封装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. JMeter专题系列（六）集合点

    JMeter也有像LR中的集合点: JMeter里面的集合点是通过添加定时器来完成. 注意:集合点的位置一定要在Sample之前. 集合点:虽然我们的“性能测试”理解为“多用户并发测试”,但客观上来说 ...

  2. durex-word

    "(半夜没睡着) “你是不是饿了,哎呀我也饿了.”" "(聊到合拍处) “我和你有一万句me too想要说.”" "(异地恋) “我辞职,去你那儿吧! ...

  3. 1-1 node 基础

    1.什么是nodejs?   简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js ...

  4. GIS管网项目-flex/java

    开发语言是flex.java,开发平台是myeclise.eclise,后台数据库是oracel或sqlserver,开发接口是arcgis api for flex,提供以下的功能: 1.应急指挥: ...

  5. 如何获取ios 设备名字 model

    由于需要获取设备名字,在网上找了一些方法,发现能够解决问题,但是需要做一个匹配,然后设备年年都会出新款,而且设备的种类又很多,所以在获取设备信息后我又做了一个操作,--->我在google上找到 ...

  6. iOS-钥匙串中证书全部失效（证书的签发者无效）的解决办法

    今天用Xcode打包IPA文件给同事,结果提示import时,提示证书missing,找了半天没发现问题,后来打开钥匙串,发现证书全失效了!!!根证书失效了!吓死宝宝了 解决方法 首选此方法: 1.打 ...

  7. Android自定义View4——统计图View

    1.介绍 周末在逛慕课网的时候,看到了一张学习计划报告图,详细记录了自己一周的学习情况,天天都是0节课啊!正好在学习Android自定义View,于是就想着自己去写了一个,这里先给出一张慕课网的图,和 ...

  8. SQL SERVER导出特殊格式的平面文件

    有时候我们需要将SQL SERVER的数据一次性导入到ORACLE中,对于数据量大的表.我一般习惯先从SQL SERVER导出特殊格式的平面文件(CSV或TXT),然后用SQL*Loader装载数据到 ...

  9. SQL Server 2008 R2——根据数据查找表名和字段名 根据脏数据定位表和字段

    =================================版权声明================================= 版权声明:原创文章 谢绝转载  请通过右侧公告中的“联系邮 ...

  10. GL.IssuePluginEvent 发布插件事件

    Description 描述 Send a user-defined event to a native code plugin. 发送一个用户定义的事件到一个本地代码插件. Rendering in ...