<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笑话</title>
    <style>
        #box{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        #box>div{
            width: 30%;
            height: 600px;
            overflow: auto;
            border: 1px solid;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        #box>div>div{
            width: 90%;
            background-color: pink;
            border-radius: 10px;
            margin: 10px 0;
        }
        #box>div>div>img{
            width: 90%;
            margin-left: 5%;
        }
    </style>
</head>
<body>
    <h1>笑话</h1>
    <button id="btn">查看详情</button>
    <div id="box">
        <div id="txt"></div>
        <div id="img"></div>
        <div id="gif"></div>
    </div>
    <script>
        function read(){
            ajax({
                type:"get",
                url:"http://route.showapi.com/341-1?showapi_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2",
                dataType:"json",
                success:function(responseData){
                    var data = responseData.showapi_res_body.contentlist;
                    // console.log(data);
                    var html = "";
                    data.forEach(function(txt){
                        html += `<div>
                                    <h3>${txt.title}</h3>
                                    <p>${txt.text}</p>
                                </div>`;
                    });
                    document.getElementById("txt").innerHTML = html;
 
                }
            });
            ajax({
                type:"get",
                url:"http://route.showapi.com/341-2?showapi_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2&page=3",
                dataType:"json",
                success:function(responseData){
                    var data = responseData.showapi_res_body.contentlist;
                    // console.log(data);
                    var html = "";
                    data.forEach(function(txt){
                        html += `<div>
                                    <h3>${txt.title}</h3>
                                    <img src="${txt.img}">
                                </div>`;
                    });
                    document.getElementById("img").innerHTML = html;
 
                }
            });
            ajax({
                type:"get",
                url:"http://route.showapi.com/341-3?showapi_appid=63668&showapi_sign=31c73b7db6b34ed59250ecb5c370b6e2&page=2",
                dataType:"json",
                success:function(responseData){
                    var data = responseData.showapi_res_body.contentlist;
                    // console.log(data);
                    var html = "";
                    data.forEach(function(txt){
                        html += `<div>
                                    <h3>${txt.title}</h3>
                                    <img src="${txt.img}">
                                </div>`;
                    });
                    document.getElementById("gif").innerHTML = html;

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118599490

js中通过ajax调用网上接口的更多相关文章

  1. thinkjs学习-this.assign传递数据和ajax调用后台接口

    在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一 ...

  2. php中创建和调用webservice接口示例

    php中创建和调用webservice接口示例   这篇文章主要介绍了php中创建和调用webservice接口示例,包括webservice基本知识.webservice服务端例子.webservi ...

  3. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  4. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

  5. java 中使用ajax调用后台方法注意事项

    java 中使用ajax调用后台方法注意事项,后台方法一定要加@ResponseBody jQuery.validator.addMethod("checkRuleName",fu ...

  6. 关于js中函数的调用问题

    js中函数的调用方法 1.直接调用 函数名(参数): 2.通过指向函数的变量去调用 例如: var myval = 函数名: 此刻 myval是指向函数的一个指针: myval(实际参数):此刻调用的 ...

  7. 三界商城 ajax调用城市接口,竟然需要登录,调用的接口需要登录,如果不登录 重定向到登录

    现象 商家入驻 填写信息的 ajax请求没有数据 network->name-headers 返回302 发现调用的接口,需要登录,否则重定向登录 //初始化用户信息查询 public func ...

  8. Dynamic CRM使用FetchXML在js中查询与调用传递编码问题

    在页面交互脚本js中实现窗体交互逻辑是很常见的crm场景,一般情况下使用拓展工具RESTBuilder编辑器,可以很方便的进行操作,增删改查均能实现,但在某些较为特殊的场景下,需要根据条件去拼接查询过 ...

  9. JS中函数的调用和this的值

    调用每一个函数会暂停当前函数的执行,传递控制权和参数给新函数.除了声明时定义的形式参数,每个函数还接收两个附加的参数:this 和 arguments. 参数this在面向对象编程中非常重要,他的值取 ...

随机推荐

  1. 能直接调试的开放API？这个API Hub绝了

    ​ 01 此前时不时会有一些研发小伙伴和我诉苦,说很多企业由于人力财力限制或者需求不强,会直接购买使用第三方的开放API,这样一来, 一则由于开放项目不是量身定制的,寻找自己合适的接口也要搜索调研蛮多 ...

  2. 5.Docker容器学习之新手进阶使用

    @ 原文地址:点击直达 学习参考:https://yeasy.gitbooks.io/docker_practice/repository/registry.html 0x00 前言简述 描述: 本章 ...

  3. Ant Design Pro V5 与 IdentityServer 实现 Password 模式的登录

    最近处于休息状态,想趁着休息时间,为自己做一个后台. 后端框架选用了 Abp.之前公司使用了一些自研的框架,但由于人力资源有限,后期框架的升级及维护都是比较耗时,这次干脆直接使用Abp,即省心又能快速 ...

  4. Java语言学习day12--7月11日

    ###16随机点名器代码实现 * A: 随机点名器案例代码 /* 随机点名器,集合改进 (学生的姓名和年龄) 现实中有学生这个事物,使用定义类的形式,描述学生事物 属性: 姓名,年龄 姓名存储了数组, ...

  5. python基础练习题（题目 将一个整数分解质因数。例如：输入90,打印出90=2*3*3*5）

    day9 --------------------------------------------------------------- 实例014:分解质因数 题目 将一个整数分解质因数.例如:输入 ...

  6. vite初使用随记

    vite的安装 按照官网文档来看,并不难. 先检查自己电脑node的版本与npm的版本/yarn的版本 可以直接用yarn安装,yarn create vite 这是最原始的安装,即类似于安装vue- ...

  7. k8s入门之Service(六)

    将一组pod公开为网络服务,通过service代理,可以实现负载均衡 一.ClusterIP 此方式只能在集群内访问 1.使用命令暴露已存在的pod (1)继续使用前面章节的案例,查看名称为nginx ...

  8. .NET 程序读取当前目录避坑指南

    前些天有 AgileConfig 的用户反映,如果把 AgileConfig 部署成 Windows 服务程序会启动失败.我看了一下日志,发现根目录被定位到了 C:\Windows\System32 ...

  9. properties、yml配置文件映射对象

    1.properties文件内容映射到类对象(属性),如Resource目录下的1.properties文件已配置前缀为com.imooc.people相关的信息,然后: pom添加依赖:spring ...

  10. 4.18-token验证

    在postman编写的每一个叫测试用例,既然收测试用例,那么就会有结果对比 API测试断言tests(判断一个接口测试用例是否成功,或者说是通过,是根据断言的三个条件都成立的情况下得到的结果) 协议状 ...