파이썬-실습(6) HTML 콤보박스 값을 HTML에 다시 반영하기

파이썬-실습(6) HTML 콤보박스 값을 HTML에 다시 반영하기

이 부분에 대해서 되게 많은 고민을 했었습니다.

이 페이지에서 왼쪽에서 보이는 콤보박스에 있는 값을 선택하면 중간에 보이는 기준시간을 바꾸고

기준시간에 맞춰서 밑에 보이는 각 구별의 날씨또한 시간에 맞춰서 바뀌게끔 하고 싶었습니다.

단순히 콤보박스 값을 HTML 자체에서 반영하려고 하면 몇가지의 방법이 있었지만 제가 원했던 방식은 아니였습니다.

그래서 저는 조금 편법(?)을 사용하였습니다.

Dogyu's Server 기준시간: {{date}} 시간선택 (3시간 간격) -- 선택 -- {% for n in range(0,(count-1)) %} {{time[n]['date']}} {% endfor %} 확인

위와 같이 HTML 부분을 작성한다음 콤보박스에 있는 값을 선택하게되면

해당 시간을 URL주소로 바꿔 페이지로 이동하게 됩니다.

@app.route('/weather/', methods=['GET', 'POST']) def weather_user_gui(user_date): global select_date ctime, count = count_time() weather = set_data_for_weather(user_date) return render_template('weather.html', data = weather, date = user_date, time = ctime, count = count)

이렇게 server에서 /라는 가변적인 주소를 넣어준 다음 위의 콤보박스에서 선택한 값이 user_date에 들어가게됩니다.

그러면 이제부터는 쉽습니다.

user_date의 값을 가지고 weather.html에 date로 값을 넣어주고 date에 맞춰서 아래 구의 날씨들을 변경해주면 됩니다.

HTML에 데이터값을 삽입하는 방법은 아래 게시글을 보면 도움이 될 것 같습니다.

https://cleaning-toolbox.tistory.com/56

이렇게하면 이제 콤보박스에서 선택된 시간에 따라 아래의 구마다 날씨들이 새롭게 바뀌는 것을 볼 수 있습니다.

from http://cleaning-toolbox.tistory.com/58 by ccl(A) rewrite - 2021-12-15 21:27:11