render_template사용법 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

render_template사용법

undefined주차

김*연

・

추천

・

조회수

답변 완료

제가 다른 페이지로 이동하고 싶어서 login.html파일을 새로 만들어 render_template과 window.location.href을 사용했는데요 에러는 뜨지 않는데 페이지 이동이 안됩니다 ㅠㅠ 혹시 어디가 오류인지 알 수 있을까요?

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/login')
def login():
   return render_template('login.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '요청 잘 받았어용'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)

이게 app.py 소스코드이고요

<!doctype html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function hey(){
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response)
                }
            })
        }
    </script>
    <title>스마트가로등 페이지</title>

    <style type="text/css">
      .mytitle{
          height: 350px;
          padding: 150px;
          text-align: center;

          background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxODExMjJfNzkg%2FMDAxNTQyODcyMjIxNDE0.aRx_2IE9YC7bT4ejXkdK-1Mkab0LGsdn1OIJMD5BCJ0g.f0npgzT0zUXa84N5CuLg67-kQYbuq1ylVIuBzcADU14g.JPEG.hi_nso%2Fdd.JPG&type=sc960_832");
          background-position: center 5%;
          background-size: cover;

          color: darkblue;
      }
      .mytitle>button{
          margin-top: 20px;
      }
      .box_a{
          width: 400px;
          height: 150px;
          margin: 70px auto 0 auto;

          box-shadow: 0 0 3px 0 gray;

          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
      .box_a>button{
          margin-left: 10px;
          margin-right: 60px;
      }

      div.box_b {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
      }
      .bad {
          color: red;
      }

    </style>

    <script>
        function q1() {
          $('#names-q1').empty()
          $.ajax({
          type: "GET",
          url: "http://data.ex.co.kr/openapi/trafficapi/trafficRegion?key=0246556318&type=json",
          data: {},
          success: function(response){
            let rows = response['trafficRegion']
            for (let i=0; i<rows.length; i++){
              let gu_name = rows[i]['regionName']
              let gu_car=rows[i]['trafficAmout']
                  let temp_html=``
                  if(gu_car>1000){
                    temp_html= `<li class="bad">${gu_name}:${gu_car}</li>`
                  }else{
                    temp_html= `<li>${gu_name}:${gu_car}</li>`
                  }
              $('#names-q1').append(temp_html)
            }
          }
    })
    }
    </script>
</head>

<body>
    <div class="mytitle">
      <h1>스마트가로등</h1>
      <button onclick="window.location.href='/login'" type="button" class="btn btn-outline-secondary">관리페이지로 이동하기</button>
    </div>
    <div class="box_a">

        <div class="box_b">
            <button onclick="q1()" type="button" class="btn btn-outline-dark">도로혼잡도</button>
        </div>
    </div>
    <div>
        <ul id="names-q1"></ul>
    </div>
</body>
</html>

이게 index.html 소스입니다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Title</title>
    <script>
        function login(){
            $.ajax({
                type: "GET",
                url: "/login",
            })
        }
    </script>
</head>
<body>
  <h1>냠</h1>
</body>
</html>

이건 테스트용으로 만든 login.html 소스코드요 ㅠㅠ,,,

어디가 문제일까요..??

댓글 알림