ajax / java script 복습하기

-로딩후 바로실행하기

        $(document).ready(function () {
            listing();
        });

        function listing() {
            console.log('화면 로딩 후 잘 실행되었습니다');
        }

-ajax 기본 form

        $.ajax({
            type: "GET", // GET 방식으로 요청한다.
            url: "http://spartacodingclub.shop/post",
            data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
            success: function (response) { // 서버에서 준 결과를 response라는 변수에 담음
                }
            }
        })

작성후에는 항상 console.log() 확인하기

ex) console.log(response)
concole.log(let값,let값,let값)

api 열세우기

let rows = response['api에 있는 첫번째 항목']

        $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/post",
            data: {},
            success: function (response) { 
            let rows = response['articles']

돌려라 for문

for(반복)문으로 돌려준다

 	$.ajax({
           type: "GET",
           url: "http://spartacodingclub.shop/post",
           data: {},
           success: function (response) { 
		let rows = response['articles']
		for (let i=0; i <rows.length;i++){
			//불러올 값들// }

for문 기본형은 외워질듯 안외워짐..ㅠㅠ

let으로 불러올 데이터 지칭하기

 	$.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]['desc']
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let url = rows[i]['url']}

temp_html

html을 보여주기(?)
바디에서 불러올수 있는 애들을 가지고 와서 클린/가공하기
불러올 데이터는 ${let값} 요렇게쓴다
temp_html을 let할땐 `` 잊지말자 ~

 	$.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]['desc']
                        let image = rows[i]['image']
                        let title = rows[i]['title']
                        let url = rows[i]['url']
                        let temp_html = `<div class="card">
                                        <img class="card-img-top"
                                             src="${image}"
                                             alt="Card image cap">
                                        <div class="card-body">
                                            <h5 class="card-title">
                                                <a href="${url}" class="card-title"> ${title} </a>
                                                <p class="card-text">${desc}</p>
                                                <p class="card-text comment">${comment}</span></p>
                                        </div>

                                    </div>`              
                       }

api에서 가져온 값을들 펼치기

$('#id값').append(temp_html)

새로고침할때마다 비어있기

$('#id값').empty()

최종적인 스크립트 모냥새

    $(document).ready(function () {
       $('#cards-box').empty()
       listing();
    });

    function listing() {
        $.ajax({
            type: "GET", // GET 방식으로 요청한다.
            url: "http://spartacodingclub.shop/post",
            data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
            success: function (response) { // 서버에서 준 결과를 response라는 변수에 담음
                let rows = response['articles']
                for (let i=0; i <rows.length;i++){
                    let comment = rows[i]['comment']
                    let desc = rows[i]['desc']
                    let image = rows[i]['image']
                    let title = rows[i]['title']
                    let url = rows[i]['url']
                    let temp_html = `<div class="card">
                                    <img class="card-img-top"
                                         src="${image}"
                                         alt="Card image cap">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <a href="${url}" class="card-title"> ${title} </a>
                                            <p class="card-text">${desc}</p>
                                            <p class="card-text comment">${comment}</span></p>
                                    </div>

                                </div>`
                    $('#cards-box').append(temp_html)
                }

            }
        })
    }