Ajax Get Post 동작 방식

Ajax

아무래도 축구팀과 스펠링이 같다 보니 자꾸 '아약스'라고 발음하게 되는데

번역기의 발음도 그렇고 네이티브들도 모두 '에이잭스'라고 발음한다고 한다.

꼭 참고하고 놓치지 말자.

Ajax Get 동작 방식 예시 1

$(document).ready(function(){
            set_temp()
            show_comment()
        });
        function set_temp(){
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    $('#temp').text(response['temp'])
                }
            })
        }

코드부터 보면 웹페이지가 로딩이 완료되면 set_temp 함수가 실행되게끔 되어 있고

set_temp함수는 GET방식으로 url에서 api를 긁어온다.

코드에서는 긁어온 값 중 'temp'의 11.95만 응답했다.

<div class="mypic">
        <h1>리오넬 메시 응원 페이지</h1>
        <p>현재기온: <span id="temp">36</span>도</p>
    </div>

가져온 'temp'의 11.95는 temp라는 id값을 가진 p태그의 text에

덮어 써지면서 set_temp함수가 종료된다.

 

Ajax Get 동작 방식 예시 2

두 번째 GET 방식의 예시 api는 서울시 미세먼지 api로 다른 방식으로 처리해보려 한다.

function seoul_air() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']
                        let state = rows[i]['IDEX_NM']

                        console.log(gu_name, gu_mise, state)
                    }
                }
            })
        }

실행되는 함수에 seoul_air()를 추가했고 이 함수 역시 GET방식으로 서울시 미세먼지 api를 긁어온다.

원하는 데이터를 추리기 위해 rows라는 변수를 선언하고 그 안에 RealtimeCityAir안의 row 딕셔너리 안의

데이터만 넣고 반복문을 돌렸다.

그리고 각각 변수를 선언해 데이터를 넣어줬고 console.log를 통해 표현해줬다.

 

실행결과

그리고 웹페이지의 검사 - console탭에서 결과를 확인할 수 있다.

이 두 가지를 다시 정리하고 있을 시점에서 Ajax GET방식에 대한 이해가 완벽히 됐다.

 

Ajax Get 동작 방식 예시 3

Get방식 3번째 예시는 Post 방식으로 데이터를 DB에 넣은 후 그 데이터를 표현하는

예시를 적을 건데 그것은 Post 동작 방식을 정리하고 다시 적겠다.

 

Ajax Post 동작 방식 예시

function save_comment(){
    let name = $('#name').val()
    let comment = $('#comment').val()

    $.ajax({
        type: 'POST',
        url: '/homework',
        data: {name_give:name, comment_give:comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

Post 방식과 Get 방식의 차이는 일단 url이 다르고(DB와의 연결을 담당하는 부분과 연결)

data 값의 유무이다

jQuery를 이용해 name값 AAA와 comment값 BBB를 변수에 저장한 후

name_give , comment_give의 형태로 DB과 연결을 담당하는 곳으로 보낸다 (python으로 작업했다)

alert(response['msg'] 부분은 top and down 방식으로 data값이 처리되고 난 후의 값을 응답받는다

 

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']

    doc = {
        'name':name_receive,
        'comment':comment_receive
    }

    db.messi.insert_one(doc)

    return jsonify({'msg':'파일 저장 완료 !!@!@!@!@'})

이제 python에서 봤을 때 save_comment함수의 name_give와 comment_give는 

각각 name_receive와 comment_receive라는 새로운 변수로 보내고

doc라는 변수를 선언해 각각 DB의 name과 comment라는 공간에 집어넣도록 설정했다

그리고 db.messi.insert_one(doc)라는 명령을 통해 DB를 messi라는 이름으로 지정하고

데이터를 보냈다.

그리고 DB를 확인해보면 name과 comment에 AAA와 BBB가 문자열 형태로 

잘 들어간 것을 볼 수 있다.

이후 

return jsonify({'msg':'파일 저장 완료 !!@!@!@!@'})

명령어를 통해 파일 저장 완료라는 메시지를 요청이 왔었던 index.html로 보내고

function save_comment(){
    let name = $('#name').val()
    let comment = $('#comment').val()

    $.ajax({
        type: 'POST',
        url: '/homework',
        data: {name_give:name, comment_give:comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

alert(response['msg'])가 파일 저장 완료 메시지를 받아 알림창을 띄운다.

Ajax Post + Get 동작 방식 예시

사실 post + get 방식이라기보다 방금 전에 했던 Post 방식으로 DB에 넣었던 

데이터를 Get 방식으로 가져오는 방식이다.

그러므로 post 방식으로 데이터를 저장했던 것에서 이어서

Get방식으로 가져오는 것에 대해 설명하겠다.

@app.route("/homework", methods=["GET"])
def homework_get():
    messi_list = list(db.messi.find({}, {'_id': False}))
    return jsonify({'messi':messi_list})

일단 Get방식은 python에서 먼저 봐야 한다.

messi_list 변수 안의 값은 

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

db에서 값을 모두 찾는 find 명령어이다. (users만 db명으로 바꾸면 된다)

이후 이러한 messi_list를 'messi'라는 이름으로 index.html로 보낸다

 

function show_comment(){
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['messi']
            for (let i = 0; i < rows.length; i++) {
                let name = rows[i]['name']
                let comment = rows[i]['comment']

                let temp_html = `<div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${name}</footer>
                                        </blockquote>
                                    </div>
                                </div>`
                $('#comment-list').append(temp_html)
            }
        }
    });
}

이렇게 넘어온 'messi'라는 데이터를 rows라는 변수에 넣은 후 반복문으로

원하는 데이터만 걸러준다

그리고 정제된 데이터를 temp_html이라는 변수 안에 위 코드와 같은 형태로

넣어준다.

temp_html은 반복문의 길이만큼 위 사진의 화살표가 가리키는 방향으로 

append명령어를 통해 들어가고

show_comment함수는 로딩될 때마다 불러와지고 있으므로

위 사진과 같은 결과가 나타난다.