前端实现AJAX收取数据

最新推荐文章于 2024-06-13 02:48:16 发布

香菜南波万

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量335

点赞数 16

文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/studyinstall/article/details/139089701

版权

[
    {
        "title": "Eternal Summer",
        "director": "Jia Zhangke",
        "release_date": "2024-06-01",
        "box_office": "$12,345,678",
        "image_url": "https://example.com/images/movies/eternal_summer_poster.jpg"
    },
    {
        "title": "Galactic Odyssey",
        "director": "Christopher Nolan",
        "release_date": "2024-05-25",
        "box_office": "$9,876,543",
        "image_url": "https://example.com/images/movies/galactic_odyssey_poster.png"
    },
    {
        "title": "The Dream Reawakens",
        "director": "Ang Lee",
        "release_date": "2024-05-18",
        "box_office": "$7,777,777",
        "image_url": "https://example.com/images/movies/dream_reawakens_poster.jpeg"
    },
    {
        "title": "Mystery of the Lost City",
        "director": "Ridley Scott",
        "release_date": "2024-05-11",
        "box_office": "$5,666,666",
        "image_url": "https://example.com/images/movies/lost_city_poster.gif"
    },
    {
        "title": "Chronicles of a Time Traveler",
        "director": "Denis Villeneuve",
        "release_date": "2024-05-04",
        "box_office": "$4,545,454",
        "image_url": "https://example.com/images/movies/time_traveler_poster.svg"
    }
]

上面是json数据源

具体代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        #app{
            width: 1200px;
            margin: 10px auto;
        }
        /* 弹出盒子的样式 */
        #app ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #app ul li{
            width: 150px;
            height:220px;
            border: 1px solid #ccc;
            text-align: center;
        }
        #app ul li img{
            width: 100%;
            height:150px;
        }
        #app ul li a{
            font-size: 12px;
            text-decoration: none;
            color: black;
        }
        #app ul li a:hover{
            color: coral;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li><img src="" alt="">
                <p>
                    <a href="#">
                    <span>Eternal Summer</span></p>
                <span>$12,345,678</span>
                 </a>
                 
                 
            <p>
                <a href="#">
                <span>Jia Zhangke</span>
                <span>2024-06-01</span>
                </a>


            </p>
         </li>
            
        </ul>
    </div>

<script>
        //创建对象
        var xhr = new XMLHttpRequest();
       //打开对象
        xhr.open('get','movie.json')
        //监听
        xhr.send(null)
        xhr.onreadystatechange = function(){
            if(xhr.status==200&&xhr.readyState==4){
                var response = xhr.responseText;  //取服务端返回的数据
                console.log(response);
                var  data = JSON.parse(response)
                console.log(data);
                //遍历
                var mstr = ""
                data.forEach((item,index)=>{
                    console.log(item.title);
                    mstr+= `<li><img src="${item.image_url}" alt="">
                <p>
                    <a href="#">
                    <span>${item.title}</span></p>
                <span>${item.box_office}</span>
                 </a>
                 
                 
            <p>
                <a href="#">
                <span>${item.director}</span>
                <span>${item.release_date}</span>
                </a>

            </p>
         </li>`
                })
                document.querySelector('#app ul').innerHTML = mstr
                
            }
        }
        //同步操作
        // console.log(1);
        // setTimeout(function(){
        //     console.log(4);
        // },1000)

        // setTimeout(function(){
        //     console.log(5);
        // },1000)
        // console.log(2);
        // console.log(3);


        
    </script>
</body>
</html>

最终实现效果：