用ajax获取接口数据并展示到html

接口：https://m.maoyan.com/ajax/cinemaDetail?cinemaId=37934
怎么把接口里的数据用提取并展示到网页上，这个数据是动态变化的，只需要显示当天的就行

私聊给你解决

这是之前已采纳的提问，是否对你有所帮助：https://ask.csdn.net/questions/7439361

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is a test</title>
</head>
<body>
<div id="title"></div>
<div id="name"></div>
<div id="story"></div>
<div id="ability"></div>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
    $.ajax({
        url:"https://autumnfish.cn/api/hero/detail?name=提莫",
        type:"get",
        dataType: "json",
        contentType : 'x-www-form-urlencoded',
        success:function(result){
            console.log(result);
            document.getElementById("title").innerText=result.title;
            document.getElementById("name").innerText=result.name;
            document.getElementById("story").innerText=result.story;
            for(var key in result.ability){
                document.getElementById("ability").innerText += (key + ":" + result.ability[key] + "\n");
            }
        }
    })

</script>
</html>

你前端访问不同域名的东西，没有设置跨域之类的，肯定会被跨域

不知道你解决了没？

可以交流交流。

接口设置了禁止跨域，可以考虑搭建nginx做转发。
展示部分可以考虑如下内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>猫眼当日在映</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <button onclick="show()">获取当日在映</button>
        <ul id="list"></ul>
    </body>
    <script>
        function show(){
            $.ajax({
                url:"http://m.maoyan.com/ajax/cinemaDetail?cinemaId=37934",
                type:"get",
                dataType: "json",
                contentType : 'x-www-form-urlencoded',
                success:function(result){
                    $("list").find("li").remove(); 
                    const today = new Date();
                    let cur="yy-mm-dd".replace('yy', today.getFullYear()).replace('mm', today.getMonth() + 1).replace('dd', today.getDate());
                    let data=JSON.parse(result);
                    for(let movie of data.showData.movies){
                        for(let position of movie.shows){
                            for(let p of position.plist){
                                if(p.dt===cur){
                                    $("#list").append(" <li>"+movie.nm+","+p.tm+","+p.tp+"</li>");
                                }
                            }
                        }
                    }
                    
                }
            });
        }
    </script>
</html>

你可以使用后端获取，然后返回，比如你后端语言用的是php，可以如下获取：

// 1. 初始化
         $ch = curl_init();
         // 2. 设置选项，包括URL
         curl_setopt($ch,CURLOPT_URL,"https://m.maoyan.com/ajax/cinemaDetail?cinemaId=37934");
         curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
         curl_setopt($ch,CURLOPT_HEADER,0);
         curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);//停止验证证书(一般只需要设置此项为false即可)
         curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false);
         // 3. 执行并获取HTML文档内容
         $output = curl_exec($ch);
         // 4. 释放curl句柄
         curl_close($ch);
        //$output = json_decode($output,true);
        echo $output;exit;

前端：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
    $.ajax({
        url:"/api",
        type:"get",
        dataType: "json",
        success:function(result){
            console.log(result);
        }
    })
</script>