在ajax中实现随机图片

最新推荐文章于 2021-08-05 14:11:10 发布

bc_alone

最新推荐文章于 2021-08-05 14:11:10 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/bc_alone/article/details/89340379

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>www里点击随机图片</title>
</head>
<body>
    <h1 id="nameh1"></h1>
    <button id="btn">点击按钮随机图片</button>
    <span id="namesp"></span>
    <img src="" alt="" id="image" />
</body>
<script type="text/javascript" src="ajax.js"></script>		//引入ajax.js文件
<script type="text/javascript">
    var arr = [];			//定义一个空数组
    //将随机函数封装
    function num(m,n){
        return Math.round(Math.random()*(n-m)+m)
    };
    ajax({
        "url":"success.json",	//引入json文件
        "method":"get",			//方法分为post和get，我们这里用get
        "success":function(response){	
            var data = JSON.parse(response);
            console.log(data)	//查看JSON.parse()中各参数名称
                nameh1.innerHTML = data.data.title;		//使html中的nameh1在html中显示的内容为data.data.title里的内容
                arr = data.data.content;	//将content的值给arr

                btn.onclick = function(){	//设置button的点击事件
                    var numSrc = num(0,arr.length-1)		//使num随机0，arr.length-1的值给numSrc
                    namesp.innerHTML = arr[numSrc].name;		//使namesp在网页上显示的内容为arr[每个随机的值].name
                    image.src = arr[numSrc].src;	//使图片的路径为arr里的路径
                }
        }
    })
</script>
</html>

注意：
1、应用的json文件要正确
2、确认能看到各参数的名称数据，显示时要以尖角类出现
在这里插入图片描述
要点：
1、post和get区别是get可以被缓存，post不可以
但是get只能存放2048个字符且安全性较差