* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
ajax 코드가 오류가 뜨네요 괄호에서 문제가 있다고 뜨는데 아무리 찾아봐도 모르겠습니다 ㅜㅜ
<script>
$(document).ready(function(){
listing();
});
function listing() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = response['articles']
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment']
let desc = rows[i]['des']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
console.log(comment, des, image, title, url)
}
})
}
let count = 1; //함수보다 위에 있어야 카운트가 사라지지 않고 축적됌
function openclose() {
let status = $('#post-box').css('display');
if (status =='block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else{
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<title>부트스트랩</title>
<link
href="https://fonts.googleapis.com/css2?family=Jua&display=swap"
rel="stylesheet"
/>
<style>
* {
font-family: "Jua", sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
.posting-box{
width: 500px;
margin: 0px auto 30px auto;
border: 3px solid black;
border-radius: 10px;
padding: 30px;
display: none;
}
</style>
<script>
$(document).ready(function(){
listing();
});
function listing() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/post",
data: {},
success: function (response) {
let rows = response['articles']
for (let i = 0; i < rows.length; i++) {
let comment = rows[i]['comment']
let desc = rows[i]['des']
let image = rows[i]['image']
let title = rows[i]['title']
let url = rows[i]['url']
console.log(comment, des, image, title, url)
}
})
}
let count = 1; //hey 함수보다 위에 있어야 카운트가 사라지지 않고 축적됌
function openclose() {
let status = $('#post-box').css('display');
if (status =='block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else{
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">
중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다
</p>
<hr class="my-4" />
<p class="lead">
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box" id="post-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>
<div class="card-columns" id="cards-box">
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
<div class="card">
<img
class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
alt="Card image cap"
/>
<div class="card-body">
<a href="https://rhcskan1.tistory.com/" class="card-title"
>여기 기사 제목이 들어가요</a
>
<p class="card-text">
기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다</p>
</div>
</div>
</div>
</div>
</body>
</html>
