Ajax - URL parameter로 데이터 보내기

< option >을 선택하여 필터링을 해서 데이터를 보여주는 기능을 구현하려고 하였다.

< option >에서 < select >를 선택해주면 그 value()를 ajax에서 받아서 app.py로 보내주고 그에 해당하는 값을 골라서 다시 ajax로 받아온다.

ajax로 데이터를 받아 app.py로 넘겨줄 때는 두 가지 방법이 있다.

1. URL parameter로 데이터 보내기
2. < select >의 value()를 {key:value}형태로 data 보내기

1. URL parameter로 데이터 보내기

< select >의 값을 가져와서 이동하는 url(이동경로)부분에 ?&val1="+val1+"&val2="+val2 키와 값을 넣어줘서 넘기는 방법이다.

function filtering(){
        $('#myCards').empty()
        let builder = $('#type').val()
        let type = $('#isart').val()
        let area = $('#area').val()
        $.ajax({
            type: 'GET',
            url: '/select?&builder_give='+builder+'&type_give='+type+'&area_give='+area,
            data: {},
            success: function (response) {
            let rows = response['filter_list']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let address = rows[i]['addr']
                    let type = rows[i]['type']
                    let index = rows[i]['index']
                    let temp_html = `<div class="col">
                                        <div class="card">
                                            <img src="" class="card-img-top" alt="${name}">
                                            <div class="card-body">
                                                <a href="/detail/mm_no/${index}"><h5 data-type="${type}" class="card-title">${name}</h5></a>
                                                <p class="card-text">${address}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#myCards').append(temp_html)
                }
            }
        })
    }

2. < select >의 value()를 {key:value}형태로 data 보내기

위와 같은 방식으로 val()을 받아온 뒤 이를 key: value 형태로 만들어 data로 보내주는 방식이다.

function filtering(){
        $('#myCards').empty()
        let builder = $('#type').val()
        let type = $('#art').val()
        let area = $('#area').val()
        
        let allData = {
            "builder_give" : builder,
            "type_give" : type,
            "area_give" : area
        }

        $.ajax({
            type: 'GET',
            url: '/select',
            data: {allData},
            success: function (response) {
            let rows = response['filter_list']
                for (let i = 0; i < rows.length; i++) {
                    let name = rows[i]['name']
                    let address = rows[i]['addr']
                    let type = rows[i]['type']
                    let index = rows[i]['index']
                    let temp_html = `<div class="col">
                                      <p>  위와 동일 </p>
                                    </div>`
                    $('#myCards').append(temp_html)
                }
            }
        })
    }

URL을 길게 키와 값을 일일이 적어주는 것보다는 data로 넘겨주는 것이 더 깔끔해 보이는 것 같다.