44_ajax, get, post의 통신 방식 이해하기

영화인 프로젝트 게시물 참고: https://velog.io/@yh271/webbase36

1. GET (데이터 조회, 보여주기)

• app.py의 일부

@app.route('/api/list', methods=['GET'])
def show_stars():
    movie_star = list(db.mystar.find({},{'_id':False}).sort('like', -1))
    return jsonify({'movie_stars':movie_star})

• index.html <script>...</script>의 일부

            function showStar() {
                $.ajax({
                    type: 'GET',
                    url: '/api/list?sample_give=샘플데이터',
                    data: {},
                    success: function (response) {
                        let mystars = response['movie_stars']
                        for(let i = 0; i < mystars.length; i++) {
                            let name = mystars[i]['name']
                            let img_url = mystars[i]['img_url']
                            let recent = mystars[i]['recent']
                            let url = mystars[i]['url']
                            let like = mystars[i]['like']

                            let temp_html = `<div class="card">
                                                <div class="card-content">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <figure class="image is-48x48">
                                                                <img
                                                                        src="${img_url}"
                                                                        alt="Placeholder image"
                                                                />
                                                            </figure>
                                                        </div>
                                                        <div class="media-content">
                                                            <a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
                                                            <p class="subtitle is-6">${recent}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <footer class="card-footer">
                                                    <a href="#" onclick="likeStar('${name}')" class="card-footer-item has-text-info">
                                                        위로!
                                                        <span class="icon">
                                              <i class="fas fa-thumbs-up"></i>
                                            </span>
                                                    </a>
                                                    <a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger">
                                                        삭제
                                                        <span class="icon">
                                              <i class="fas fa-ban"></i>
                                            </span>
                                                    </a>
                                                </footer>
                                            </div>`
                            $('#star-box').append(temp_html)

                        }
                    }
                });
            }

2. POST(입력, 수정, 삭제)

• app.py의 일부 (입력)

@app.route('/api/like', methods=['POST'])
def like_star():
    name_receive = request.form['name_give']
    target_star = db.mystar.find_one({'name':name_receive})
    current_like = target_star['like']
    new_like = current_like + 1
    db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
    return jsonify({'msg': '좋아요 완료!'})

• app.py의 일부 (삭제)

@app.route('/api/delete', methods=['POST'])
def delete_star():
    name_receive = request.form['name_give']
    db.mystar.delete_one({'name':name_receive})
    return jsonify({'msg': '삭제 완료!'})

• index.html <script>...</script>의 일부 (입력)

function likeStar(name) {
 	$.ajax({
		type: 'POST',
		url: '/api/like',
		data: {name_give:name},
		success: function (response) {
		alert(response['msg']);
		window.location.reload()
		}
	});
}

• index.html <script>...</script>의 일부 (삭제)

function deleteStar(name) {
	$.ajax({
		type: 'POST',
		url: '/api/delete',
		data: {name_give:name},
		success: function (response) {
		alert(response['msg']);
		window.location.reload()
		}
	});
}