html5页面中通过ajax调用接口,js中通过ajax调用网上接口-CSDN博客

本文展示了如何在HTML5页面中利用Ajax技术分别调用三个不同的API接口，获取并展示笑话内容。代码示例中，当点击按钮时，会加载不同页面的数据到对应的div元素中，包括标题和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笑话

#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%;

}

笑话

查看详情

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 += `

${txt.title}

${txt.text}

});

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 += `

${txt.title}

%24%7Btxt.img%7D

});

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 += `

${txt.title}

%24%7Btxt.img%7D

});

document.getElementById("gif").innerHTML = html;

}

});

}

document.getElementById("btn").onclick = read;

function ajax(options){

options = options || {};

var method = (options.type || "GET").toUpperCase(),

url = options.url,

queryString = null;

if(!url)

return;

if(options.data){

queryString = [];

for(var attr in options.data){

queryString.push(attr + "=" +options.data[attr]);

}

queryString = queryString.join("&");

}

if(method === "GET" && queryString){

url += "?"+queryString;

queryString = "";

}

var xhr = new XMLHttpRequest();

xhr.open(method,url,true);

if(method === "POST")

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(queryString);

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status === 200){

var data = xhr.responseText;

if(options.dataType === "json")

data = JSON.parse(data);

options.success && options.success(data);

}else{

options.error && options.error(xhr.status);

}