<!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. 如何规避容器内做Java堆dump导致容器崩溃的问题

    写在前边 最近公司生产环境的容器云上出了个性能问题,为了做性能分析,使用 JDK 自带的 jmap 收集堆dump,出现了内存溢出导致了容器崩溃. 本篇文章将带你探究,如何规避容器内做堆 dump 导 ...

  2. JetBrains Rider C# 学习①

    Rider 发现 Alt+F7 键无效: 把GeForce Experience里的游戏覆盖关闭 前言 C#从入门到精通 链接:https://pan.baidu.com/s/1UveJI_f-c5D ...

  3. 解决Mapper.xml文件中sql标签第一个字段报错

    在文件标头的http后边补上www 下边代码仅第4行有变动 原文件: <?xml version="1.0" encoding="UTF-8"?> ...

  4. R语言_格兰因果检验

    #当前文件路径 getwd() #设置当前路径,注意转译 setwd("C://Users//Administrator//Desktop//R_test") #导入数据 data ...

  5. XCTF练习题---MISC---normal_png

    XCTF练习题---MISC---normal_png flag:flag{B8B68DD7007B1E406F3DF624440D31E0} 解题步骤: 1.观察题目,下载附件 2.拿到手以后发现是 ...

  6. Annotation(注释) _Override _ Deprecated _ SuppressWarnings

    Deprecated SuppressWarnings 元注解

  7. [操作系统]LINUX进程状态说明

    R(task_running) : 可执行状态 只有在该状态的进程才可能在CPU上运行.而同一时刻可能有多个进程 处于可执行状态,这些进程的task_struct结构(进程控制块)被放入对应CPU的 ...

  8. 开源框架 WebFirst 一键生成项目，在线建表

    1.WebFirst框架描述 WebFirst  是果糖大数据团队开发的新一代 高性能 代码生成器&数据库设计工具,由.net core 3.1 + sqlsugar 开发 导入1000个表只 ...

  9. 817. Linked List Components - LeetCode

    Question 817. Linked List Components Solution 题目大意:给一个链表和该链表元素组成的一个子数组,求子数组在链表中组成多少个片段,每个片段中可有多个连续的元 ...

  10. SyntaxError: Non-UTF-8 code starting with '\xef' in file（已解决）

    错误原因: python代码中出现了中文字符 解决方案: 在python代码文件的第一行(必须是第一行)添加如下代码(随编码不同自行修改): #coding=utf-8