用ajax调用json来实现随机图片

最新推荐文章于 2022-08-26 20:50:00 发布

sty_star

最新推荐文章于 2022-08-26 20:50:00 发布

阅读量438

点赞数 1

分类专栏：笔记文章标签： ajax

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用ajax调用json来实现随机图片

今天没听太懂一早上被404困扰所以把代码以及思路写下来以防之后有用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>切换图片</title>
	<style type="text/css">
    *{
       margin: 0;
       padding: 0;
    }
	</style>
</head>
<body>
   <h1 id="h11"></h1>
   <button id="btn">点击切换图片</button>
   <p id="p1"></p>
   <img src="" alt="" id="img1">
</body>
<script type="text/javascript" src="ajax.js"></script> //链入外部ajax文件
<script type="text/javascript">
function sui(n,m){                              //封装随机数并且返回值
	return Math.round(Math.random()*(m-n)+n);
}
var arr = [];                //定义一个空的数组
ajax({                        //调用json文件
	"url":"success.json",              //输入json文件路径
	"method":"get",                       //输入方法
	"success":function(response){        //response为客户端返回值
         var ddd = JSON.parse(response);    //使用parse将返回值转化并赋值给ddd   此时ddd代表整个json的内容
         h11.innerHTML = ddd.data.title;         //将h11中的内容替换为json中的data下的title
         arr = ddd.data.content;					//将json中的content数组赋予空数组arr
         btn.onclick = function(){              //赋予一个点击事件
         	p1.innerHTML = arr[sui(0,arr.length-1)].name;       //输入随机数的参数来实现数组长度的随机数并使用随机数为下标拿到数组中对应的值中以name为键的值，并将这个值放入p1中
         	img1.src = arr[sui(0,arr.length-1)].src;   //将对应的数组中以src为键的值拿出来替换掉img1中的图片路径
         }
	}
})
</script>
</html>



json：
{
    "status": "0",
    "message": "success",
    "data": {
        "title": "请认真对待考试,随机选取其中一张图片",
        "content": [
            {
                "id": "001",
                "name":"第一张图片",
                "src":"img/11.jpg"
            },
            {
                "id": "002",
                "name":"第二张图片",
                "src":"img/22.jpg"
            },
            {
                "id": "003",
                "name":"第三张图片",
                "src":"img/33.jpg"
            },
            {
                "id": "004",
                "name":"第四张图片",
                "src":"img/44.jpg"
            },
            {
                "id": "005",
                "name":"第五张图片",
                "src":"img/55.jpg"
            }
        ]
    }
}

sty_star

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用ajax调用json来实现随机图片

用ajax调用json来实现随机图片今天没听太懂一早上被404困扰所以把代码以及思路写下来以防之后有用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>切换图片</title> <style type="text/css"...
复制链接

扫一扫