AJAX的应用详情页列表页看下一个文章

最新推荐文章于 2022-11-19 18:31:41 发布

刘一卓

最新推荐文章于 2022-11-19 18:31:41 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/weixin_44081699/article/details/86466580

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
	 *{
        margin: 0;
        padding: 0;
      }
      .box-1{position: relative;
          margin: 0 auto;
          width: 800px;
          height: 600px;
          border: 1px solid red;}
          .box-1 ul{position: absolute;
          left: 300px;
          top: 10px;
          	list-style: none}
    
    </style>
  </head>
  <div class="box-1">
  	 
  </div>
  <body>
   
		<script type="text/javascript">
                	function ajax(method, url, data,fn) {     
    let htp = null;
    try {
        htp = new XMLHttpRequest()
    }
    catch (err) {
        htp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    if (method == "get") {
        htp.open(method, url +"?"+ data);
        htp.send()
    } else {
        htp.open(method, url);
        htp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        htp.send(data)
    }
    htp.onreadystatechange = function () {
        if (htp.readyState == 4 && htp.status == 200) {
            fn(htp.responseText)
        }

    }
}
//              	截取id
                let tid=window.location.search.substring(1,);     
      var odiv=document.getElementsByClassName("box-1")[0];
        ajax("get","http://www.ifluo.cn/a/quanzhan/detail/","mvid="+tid,function(data){
      let  dapr=JSON.parse(data);
      console.log(dapr)
       
      	odiv.innerHTML=`
      	 <img src=${dapr.images.small}>
	 <ul>
	 <h1>${dapr.title}</h1>
	 	<li>导演：${dapr.directors[0].name}</li>
	 	<li>编剧：</li>
	 	<li>主演：${dapr.casts[0].name}${dapr.casts[1].name}</li>
	 	<li>类型：${dapr.genres.join("/")}</li>
	 	<li>制片国家:${dapr.countries[0]}</li>
	 	<li>语言:</li>
	 	<li>上映日期:${dapr.year}</li>
	 	<li>片长: ${dapr.year}</li>
	 	<li>又名:${dapr.aka.join("/")} </li>
	 	<li>影片简介:${dapr.summary} </li>
	 </ul>`
      
      })
     
		</script>
	</body>
</html>