使用JSON Ajax制作点击按钮随机出现一张图片并且显示对应是第几张图片

最新推荐文章于 2023-03-27 09:00:00 发布

原创最新推荐文章于 2023-03-27 09:00:00 发布 · 737 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍如何利用HTML、JavaScript和Ajax技术，结合JSON数据，实现点击按钮时随机展示一张图片，并显示其在数据集中的序号。重点讲解了随机数的生成、JSON解析以及DOM操作。

使用随机数让图片随机产生

html部分：

<body>
    <h1 id="text"></h1>
    <p id="title"></p>
    <img src="" alt="" id="img"/>
    <button id="btn">点击按钮</button>
</body>

js部分

<script type="text/javascript" src="ajax.js"></script>                   //外部引入封装好的ajax封装函数
<script type="text/javascript">
    var arr=[];          //声明一个空数组，用来存放之后需要用的数组 
    function num(n,m){
        return Math.round(Math.random()*(m-n)+n);
    }                                              //封装n~m之间的随机数
    ajax({                                         
        "url":"success.json",                //路径引入json文件
        "method":"get",                     //方法为得到，"GET"在键值对中可以不用大写
        "success":function(response){                   //成功之后会有一个函数
            var data=JSON.parse(response);              //JSON.parse转换为JSON对象
            text.innerHTML=data.data.title;             //找到标题的位置
            arr=data.data.content;                      //把需要的数组放到之前定义的空数组中
            btn.onclick=function(){                              //给按钮增加单击事件
            title.innerHTML=arr[num(0,arr.length-1)].name;         //调用n~m的随机数函数，找到需要内容对应的位置
            img.src=arr[num(0,arr.length-1)].src;     //调用随机数，让图片随机出现
            }
        }

    })
</script>

封装ajax函数

/* 封装ajax函数
 * @param {string}opt.type http连接的方式，包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
 * @param {object}opt.data 发送的参数，格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
    function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                opt.success(xmlHttp.responseText);
            }
        };
    }

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"
            }
        ]
    }
}