<!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. 2021.07.20 CF1477A Nezzar and Board（最大公因数，未证）

    2021.07.20 CF1477A Nezzar and Board(最大公因数,未证) CF1477A Nezzar and Board - 洛谷 | 计算机科学教育新生态 (luogu.com. ...

  2. AndroidStudio中的模块依赖引入后用不了

    ------------恢复内容开始------------ 在Android开发中,com.android.tools.build:gradle 3.0 以下版本依赖在gradle 中的声明写法: ...

  3. k8s入门之namespace(三)

    namespace的作用就是用来隔离资源,将同一集群中的资源划分为相互隔离的组.同一名称空间内的资源名称要唯一,但不同名称空间时没有这个要求.有些k8s资源对象与名称空间没有关系,例如 Storage ...

  4. JMeter如何设置中文

    打开Option => Choose Language => Chinese

  5. SpringBoot 三层架构 Controller、Service、Dao作用和关系详解

    首先创建一个springboot项目. model层 model层也叫pojo层或者entity层,个人比较喜欢pojo层. 一般数据库的一张表对应一个pojo层,并且表中所有字段都在pojo层都一一 ...

  6. vue-mobile-template 前端开源框架

    开源项目的由来 某天因公司业务需求,想寻找一款H5移动端的模板进行二次开发.但搜遍整个HUB都没法找到合适的空模板进行二次开发,所以心血来潮,于是有了 vue-mobile-template . 介绍 ...

  7. python中的sort用法

    内置的列表类型提供sort的方法 可以根据多项指标给list实例中的元素排序.在默认情况下,sort方法总是按照自然升序排列列表内的元素 #升序排列 list1=[2,3,1,2,5] list1.s ...

  8. 老生常谈系列之Aop--AspectJ

    老生常谈系列之Aop--AspectJ 这篇文章的目的是大概讲解AspectJ是什么,所以这个文章会花比较长的篇幅去解释一些概念(这对于日常开发来说没一点卵用,但我就是想写),本文主要参考Aspect ...

  9. java_简单学习笔记

    java_study笔记 前言: 所有笔记均总结自狂神的java基础视频 https://www.bilibili.com/video/BV12J41137hu?p=1 idea小技巧 psvm+回车 ...

  10. 【深入理解计算机系统CSAPP】第六章 存储器层次结构

    6 存储器层次结构 存储器系统(memory system)是一个具有不同容量.成本和访问时间的存储设备的层次结构.CPU 寄存器保存着最常用的数据.靠近 CPU 的小的.快速的高速缓存存储器(cac ...