팀프로젝트

TIL (오늘 내가 개발한 것)

html에서 image 클릭하면 다음페이지로 값 전달하며 넘어가기

• 일단 이름부터 복잡한 내가 해야할 것 ... 우리 팀의 백엔드는 주로 내가 담당한다 사실 거의 한다 ..ㅎㅅㅎ
  1페이지에서는 select박스 값을 POST form을 통해 서버로 전달하였다
  그래서 내가 생각한 첫 번째 방법

1. FORM

<form action = "/place" method = "POST" name="selectarea">

                     <div class="select-box">
                        <div class="input-group" id="search">
                            <select class="custom-select" name="inputGroupSelect04">
                                <option selected value="0">------ 지역 선택 ------</option>
                                <option value="서울">서울</option>
                                <option value="인천">인천</option>

                                <option value="강원">강원도</option>
                            </select>
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" type="submit" name="submit" value="success">검색</button>
                            </div>
                        </div>
                    </div>
                </form>

form형식을 쓰면 form안에 있는 모든 정보가 서버로 전송된다고 한다.
하지만 나는 여러 개의 이미지마다 클릭이벤트를 등록해야했고 for 문 안에서 form은 무리라고 생각하여 form 방법은 빨리 접었다 ^_^

2. 클릭이벤트

사실 지금 내 코드의 상황은 어떻냐면 이미지를 클릭할때마다 다음페이지로 이동하는데 전달하는 값은 클릭이벤트가 등록된 맨 마지막 이미지값만 전달된다.
그러니까 강원도를 검색하면 모든 이미지를 클릭해도 다 마지막 이미지 명소 정보를 전달하여서 3페이지에는 같은 값만 받아온다.

    <div class="review">
        {% for place in places %}

        <div class="review-in" id="review-1st">
            <div class="review-in-image">


                <img src="{{ place['image']}}" alt="review" onclick="show_detail()" >
                <script>

                    function show_detail()
                    {
                        let name="{{ place.name }}";
                        $.ajax({
                            type: 'POST',
                            url: "/detail_place",
                            data: {name_give:name},


                            success: function (response) {
                                let place = response['result']
                                //console.log(place)
                                let name=place[0].name
                                // let long=place['longitude']
                                // let lati=place['lati']
                                // let address=place['address']
                                //console.log(name)
                                location.href = "3page?name="+name;
                            },
                            error: function (request, status, error) {
                                alert('ajax 통신 실패')
                                alert(error);
                            }
                    })

                    }


                </script>


                <p>장소명 :  {{ place.name }}<br> 주소 : {{ place.address }}</p>
            </div>
        </div>

         {% endfor %}

내가 for문을 돌리면서 지역의 명소마다 onclick 을 등록해주었는데 아마 onclick 은 여러 개에 못하는 것 같다 ...
addEventListener 을 하든지 방법을 찾아야할듯

ajax에서 다음페이지 이동

거의 이거하느라 하루종일 시간을 쓴 것 같다.
구글링 많이 했는데 뭔가 내상황에 적합한 것은 안나온듯
열심히 고생했기에 내가 정보를 제공한다 ....^^
우선 위 코드에서 발췌한 부분인데 지역의 명소마다 이름을 가져와서 서버에 이름을 post로 전달해주는 코드이다.
서버에서 지역의 명소 정보를 보내주면 그 정보로 3page에 이동한다.
서버는 클라이언트에서 보내준 /3page에서 정보를 찾아주고 render_template을 해주어서 3page.html로 전달하고자 하는 값과 함께 이동시켰다.

• 2page.html

 function show_detail()
                    {
                        let name="{{ place.name }}";
                        $.ajax({
                            type: 'POST',
                            url: "/detail_place",
                            data: {name_give:name},


                            success: function (response) {
                                let place = response['result']
                                //console.log(place)
                                let name=place[0].name
                                // let long=place['longitude']
                                // let lati=place['lati']
                                // let address=place['address']
                                //console.log(name)
                                location.href = "3page?name="+name;
                            },
                            error: function (request, status, error) {
                                alert('ajax 통신 실패')
                                alert(error);
                            }
                    })

                    }

• app.py

#명소의 자세한 페이지
@app.route('/detail_place',methods=['POST'])
def show_detail():
    if request.method == 'POST':
        name = request.form['name_give']

        places = db.sample.find({"name": name}, {'_id': False})

        places = list(places)
        print(places)
        return{'result':places}

  #      return redirect(url_for('3page'),places=places)


@app.route('/3page',methods=['GET'])
def show_detail2():
     name = request.args.get('name')
     places = db.sample.find({"name": name}, {'_id': False})
     places=list(places)
     print(places)
     return render_template('3page.html',place=places)

일단 내가 해결해야할 남은 과제는 명소마다 명소정보를 3page에 잘 넘길 수 있도록 click이벤트를 짜야한다.^^. 하하 오늘은 여기까지 ~!!