HTML - 게시글목록과 정보
<html>
<head>
<title>게시글목록</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jua&family=Sunflower:wght@300&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#posts, #info{
margin : 30px;
margin-top: 10px;
padding :20px;
}
h3 {
border-bottom: 1px dotted white;
margin-top :10px;
cursor: pointer;
}
#comments {
margin-top:20px;
}
#comments h4 {
}
</style>
</head>
<body>
<div id ="page">
<div id="top">
<center>
<h1 style =" color: #F3A950;
text-align: center;
border: 2px #F3A950 solid ;
width: 40%;">게시글목록</h1>
</center>
</div>
<div id ="center">
<div id ="posts" style="color: white;"></div>
<center>
<h1 style="color: #F3A950;
text-align: center;
border: 2px #F3A950 solid ;
width: 40%;">게시글정보</h1>
</center>
<div id ="info" style="color: white;">
<h3 id ="title"></h3>
<p id ="body"></p>
<div id="comments"></div>
</div>
</div>
<div id ="bottom">
<h5>CopyRight 2022. 강깸 All Right Reserved.</h5>
</div>
</div>
</body>
<script>
//posts안에 h3를 클릭한 경우
$("#posts").on("click", "h3", function(){
let postid=$(this).find(".id").html();
//게시글 정보
$.ajax({
type: "get",
dataType: "json",
url:"https://jsonplaceholder.typicode.com/posts/" + postid,
success:function(data){
let title=data.title;
let body=data.body;
$("#title").html(title);
$("#body").html(body);
//comments 목록
$.ajax({
type: "get",
dataType: "json",
url:"https://jsonplaceholder.typicode.com/comments?postId="+postid,
success:function(data){
let str="";
$(data).each(function(){
let id=this.id;
let email=this.email;
let body=this.body;
str += "<h4>" + id+ ":" + email + "</h4>";
str += "<p>" + body + "</p>";
});
$("#comments").html(str);
}
});
}
});
});
//게시글 목록 출력
$.ajax({
type: "get",
dataType: "json",
url: "https://jsonplaceholder.typicode.com/posts",
success:function(data){
let str="";
$(data).each(function(){
let id=this.id;
let title=this.title;
if(id<=5) {
str += "<h3>";
str += "<span class='id'>" + id + "</span>";
str += "<span class='title'>" + title + "</span>";
str += "</h3>";
}
});
$("#posts").html(str);
}
});
</script>
</html>
게시글 목록을 보여주고 게시글을 클릭하면 comments 목록을 밑쪽에 보여준다.
댓글남기기