5월6일 TIL (ajax를 이용한 POST, GET방식 예제)

ajax는 기본적으로 서버(app.py)와 클라이언트 (js) 와의 소통으로 생각하면 된다.

 

ajax는 POST 방식과 GET 방식이 있다.

기본적인 ajax 사용 순서

1. JS에서 보낼 데이터를 명시하고 보내준다.

2. app.py에서 request.form으로 데이터를 받아온다. (GET일경우 안받을 수 있음)

3. app.py에서 rsonify 형식으로 response를 보내준다.

4. .js에서 받은 response를 호출하여 사용한다.

 

먼저 GET방식이다.

 

app,py

@app.route('/my_page/book_mark', methods=["GET"])
@authrize
def book_mark_list(user):
    if user is not None:
        book_mark_post = list(db.book_mark.find({'user_id' : user["id"]}))

        for post in book_mark_post:
            post['file'] = list(map(lambda x: x.decode('utf-8'), post['file']))

        return jsonify({"result" : "success", 'post' : book_mark_post})

~~.js

function book_mark_list() {
     $.ajax({
        type: "GET",
        url: "/my_page/book_mark",
        data: {
        },
        success: function (response) {
            console.log("success")
            $('#mp_pimg_posts').empty()
            let post = response['post'];
            console.log(post)
            for (var w = 0; w < post.length; w++) {
                temp_html = `
            <div class="mp_pimg_pts_pl_post" style="background-image : url('data:image/png;base64,${post[w][0]}"></div>
            `
                $('#mp_pimg_posts').append(temp_html);
            }
        }
    });
}

success 위에까지가 서버로 데이터를 보내는 부분!

success: function(response){ 

부분 부터가 다시 서버로부터 받은 데이터를 이용하는 부분이다.

 

위의 예시에서는 "result" : "success" 이외에도 book_mark_post라는 변수를 같이 json 형식으로 보내 주었기에,

클라이언트에서 사용이 가능하다!!

 

 

 

이번에는 post 방식을 살펴보자

 

app.py

@app.route('/edit_page/updage', methods=['POST'])
@authrize
def update_user(user):
    if user is not None:
        new_nick_name_receive = request.form['new_nick_name_give']
        new_user_name_receive = request.form['new_user_name_give']
        new_email_receive = request.form['new_email_give']

        doc = {
        "email" : new_email_receive,  
        "nick_name" : new_nick_name_receive,  
        "user_name" : new_user_name_receive
        # "profile_img": "static/images/profile_img.png",
        }

        name = ObjectId(user["id"])
        db.user.update_one({'_id' : name}, {'$set':doc})
        return jsonify({"result" : "success", "msg" : "수정되었습니다!!"})

 

~~.js

function update_user() {
    let new_user_name = $('#new_user_name').val()
    let new_nick_name = $('#new_nick_name').val()
    let new_email = $('#new_email').val()

    $.ajax({
        type: "POST",
        url: "/edit_page/updage",
        data: {
            new_nick_name_give: new_nick_name,
            new_user_name_give: new_user_name,
            new_email_give: new_email
        },
        success: function (response) {
            alert(response['msg'])
            window.location.replace('/my_page')
        }
    });

post방식에서는 보낼 데이터를 data 부분에 명시를 해준다.

ajax를 post형식으로 보내 주었다면,

app.py 에서는 보낸 데이터를 다시 request.form[]을 이용하여, 사용하기 좋은 형태로 만들어준다.