#웹페이지간의 질의는 어떻게? GET, POST, jinja

사전 강의에서는 한 페이지 - 서버 간의 데이터 이동이 있었는데, 이번에는 여러 페이지를 만들다보니 어떻게 해야하는지 개념이 잘 잡히지 않아서 어려웠다.

 

페이지1에서 입력한 변수로

페이지2에서 결과 값을 보여주어야 하는데 처음에 이걸 도대체 어떤 모양으로 잡아야지, 에서 한참 시간이 걸린 것 같다.

 

페이지1에서

function search() {
    let sigun_name = $('#sigun_name option:selected').val()
    let choose = $('#choose').val()

    $.ajax({
        type: 'GET',
        url: '/search',
        data: {sigun_name_give: sigun_name},
        success: function () {
            let temphtml = `/list/sigun_name_give=${sigun_name}`
            if (choose == 'none') {
                $("#help-choose").text("지역을 선택해 주세요")
            } else {
                window.location.href = `/list/sigun_name_give=${sigun_name}`
            }

        }
    })
}

이런 식으로 변수를 입력하면 

@app.route('/search', methods=['GET'])
def search():
    sigun_name_receive = request.args.get('sigun_name_give')
    return jsonify({'sigun_name': sigun_name_receive})

서버에서 그 값을 받아서 다음페이지에 url로 전달하게 작성했다.

 

 

 

그리고 다음페이지에서는 url에 있는 sigun_name을 

@app.route('/list/sigun_name_give=<sigun_name>')
def listing(sigun_name):
    return render_template("list.html", sigun_name=sigun_name)

let sigun_name = '{{ sigun_name }}'

jinja 템플릿을 이용하여 받고, 이걸 다시 서버로 보낸다.

function show_list() {
    $("#list").empty()
    $.ajax({
        type: "GET",
        url: `/list/`,
        data: {sigun_name_give: sigun_name},
        success: function (response) {
            let stores = response['stores']
            for (let i = 0; i < stores.length; i++) {
                let no = i+1
                let store_name = stores[i]['BKSTR_NM']
                let store_ad = stores[i]['REFINE_ROADNM_ADDR']
                console.log(store_name)
                let temp_html = ` <tr>
                                        <th style="text-align:center"> ${no}</th>
                                        <td style="text-align:center"> ${store_name}</td>
                                        <td style="text-align:center"> ${store_ad}</td>
                                        <td style="text-align:center"> <a href="/detail/${store_name}" class="card-footer-item">리뷰 / Tel</a></td>
                                    </tr>`
                $('#bookList').append(temp_html)
            }
        }
    })

}

그러면 서버에서 DB에 저장된 데이터를 보내주어 출력하는 형태다.

@app.route('/list/', methods=['GET'])
def show_list():
    sigun_name_receive = request.args.get('sigun_name_give')
    stores = list(db.bookstore_final.find({'SIGUN_NM':sigun_name_receive},{'_id': False}))
    return jsonify({'stores': stores})

 

+부족한 부분

- jinja를 어떻게 사용하긴 했는데, 사실 개념 이해가 완전히 된 것은 아니다. 추가 공부 필요함!!