[15일 메이킹 프로젝트] #13일차 개발일지

<!-- regions.html 내 지역버튼 -->
<div onclick="loadCadCard('서울');movePage();">
    <div class="regions-cover__row-circle">
        <img src="https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324_square.jpg">
        <span class="original-span">서울</span>
    </div>

# api data 함수
def api_data(sido):
    global all_cat_id
    global all_sido
    global all_notice_day
    global all_notice_num
    global all_cat_img
    global all_cat_feature
    global all_cat_color
    global all_cat_weigth
    global all_cat_gender
    global all_care_name
    global all_care_tel
    global all_care_addr
    all_cat_id = []  # '유기번호'
    all_sido = []  # '지역'
    all_notice_day = []  # 공고일
    all_notice_num = []  # 공고 번호
    all_cat_img = []  # 고양이사진 주소
    all_cat_feature = []  # 특징
    all_cat_color = []  # 고양이 색
    all_cat_weigth = []  # 몸무게
    all_cat_gender = []  # 성별
    all_care_name = []  # 보호소 명
    all_care_tel = []  # 보호소 연락처
    all_care_addr = []  # 보호소 주소

    sido_cats_info = db.child("고양이").child(sido).get().val()
    # print(sido_cats_info)

    for sido_c_id in sido_cats_info:  # seoul_c_id 변수는 서울 고양이 유기번호를 뜻함
        sido_cat = db.child("고양이").child(sido).child(
            sido_c_id).get().val()  # 한마리 개체
        # print(sido_c_id)

        all_cat_id.append(sido_cat['유기번호'])
        all_sido.append(sido_cat['지역'])
        all_notice_day.append(sido_cat['공고일'])
        all_notice_num.append(sido_cat['공고 번호'])
        all_cat_img.append(sido_cat['고양이사진 주소'])
        all_cat_feature.append(sido_cat['특징'])
        all_cat_color.append(sido_cat['고양이 색'])
        all_cat_weigth.append(sido_cat['몸무게'])
        all_cat_gender.append(sido_cat['성별'])
        all_care_name.append(sido_cat['보호소 명'])
        all_care_tel.append(sido_cat['보호소 연락처'])
        all_care_addr.append(sido_cat['보호소 주소'])


#  api 정보
@app.route('/cat_card_sido', methods=['GET', 'POST'])
def cat_card_sido():
    sido = request.args.get('sido_give')
    sido = str(sido)
    api_data(sido)
    print(sido, all_cat_id[0])
    return jsonify({
        "all_cat_id": all_cat_id,  # 유기번호
        "all_sido": all_sido,  # '지역'
        "all_notice_day": all_notice_day,  # 공고일
        "all_notice_num": all_notice_num,  # 공고 번호
        "all_cat_img": all_cat_img,  # 고양이사진 주소
        "all_cat_feature": all_cat_feature,  # 특징
        "all_cat_colo": all_cat_color,  # 고양이 색
        "all_cat_weigth": all_cat_weigth,  # 몸무게
        "all_cat_gender": all_cat_gender,  # 성별
        "all_care_name": all_care_name,  # 보호소 명
        "all_care_tel": all_care_tel,  # 보호소 연락처
        "all_care_addr": all_care_addr,  # 보호소 주소
    })


@app.route('/cat_list', methods=['GET', 'POST'])
def cat_list():
    return render_template('/cat_list.html')


if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

//ajax
function loadCadCard(sido){ //cat cards 로드 *특정 시,도를 클릭하면 해당하는 카드가 나오도록. + 모달창
    $.ajax({
        type : "GET",
        url: "/cat_card_sido",
        data : {sido_give:sido}, //도시이름
        success: function(data){ 
            // console.log(data);
            for(let i = 0; i < data.length; i++) {
                let cat_noticeNo = data[i]['all_cat_id']; // 공고번호
                let cat_id = data[i]['all_cat_id']; // 유기번호 (고양이별 고유한 id 값)
                let cat_sido = data[i]['all_sido']; // 지역 (관할기관)
                let cat_imgurl = data[i]['all_cat_img']; // 고양이 이미지 주소
                let cat_cat_color = data[i]['all_cat_color']; // 고양이 컬러
                let cat_sex = data[i]['all_cat_gender']; // 고양이 성별 
                let cat_kg = data[i]['all_cat_weigth']; // 고양이 체중
                let cat_note = data[i]['all_cat_feature']; //고양이 특징
                let cat_center = data[i]['all_care_name']; // 보호센터
                let cat_addr = data[i]['all_care_addr']; // 주소
                let cat_tel = data[i]['all_care_tel']; //연락처

                let catCard = `<div id= "${cat_id}" " class="cat-card" style="width: 18rem;" onclick="location.href='#'">
                                    <img class="card-img-top" src="${cat_imgurl}" alt="Card image cap">
                                    <p class="card-text">${cat_noticeNo}</p>
                                </div>`
                
                    $('.catcards-box').append(catCard); // cat cards 등장
        }}}
)};

//페이지 이동함수
function movePage() {
    window.location.href = "/cat_list";
}

//1. 현재 1개의 Ajax로 구현되어있는데, 데이터가 보이지 않고, 500 에러가 뜸. postman으로 주소를 넣어보니 The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application. 라고 뜨는데 원인을 찾는 중입니다... 혹시 어느 부분이 문제인지 알 수 있을까 해서 여쭤봅니다. (아까 가시기 전에 postman 으로 보는 방법을 알려주셨었는데, 맞게 본건지 방법도 궁금합니다.)2. 지역 버튼 클릭시 특정 인수만 전달하는 Ajax (post 방식),
   특정 인수를 db에서 검색해 넘겨준 특정 데이터를 받아 temp_html, .append를 할 수 있는 Ajax(Get방식)
-> 2개의 ajax를 따로 만들어야 하는건가요?3. 만약 1개의 Ajax로 데이터 요청,검색, 받아오기가 된다면, 그 ajax에 페이지를 이동시키는 함수 포함여부. -> 지금은 onclick에 movePage()를 넣었습니다. 기존에는 a태그에 href로 이동시켰어요.//

 

500에러!!!!!!!!!!!!!!!!!!