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

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

jquery 사용법

undefined주차

김*연

・

추천

・

조회수

답변 완료

$('#order-box').empty()

제가 이 함수를 이용해서 db가 들어올때마다 append되는 것이 아닌 가장 최근에 들어온 값만 나오게 했는데 적용이 안됩니다 ㅜㅜ

그냥 db에 들어온 값마다 append돼서 모든 값이 웹에 출력됩니다... 혹시 어디가 틀린건지 알 수 있을까요..?

작성한 코드 및 에러 메세지

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb+srv://test:sparta@cluster0.lq8puxq.mongodb.net/Cluster0?retryWrites=true&w=majority')
db = client.dbsparta


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

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

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

@app.route("/cars", methods=["GET"])
def web_cars_get():
   order_list = list(db.cars.find({},{'_id':False}))
   return jsonify({'orders': order_list})

@app.route("/hon", methods=["GET"])
def web_hon_get():
   order_list = list(db.hon.find({},{'_id':False}))
   return jsonify({'orders': order_list})

@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']
   return jsonify({'result':'success', 'msg': '요청 잘 받았어용'})

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

이게 app.py파일이고 /hon태그에 get요청 부분이 질문 부분입니다.

<!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>
        $(document).ready(function () {
            show_order();
        });

        function show_order() {
            $('#order-box').empty()
            $.ajax({
                type: 'GET',
                url: '/hon',
                data: {},
                success: function (response) {
                    let rows = response['orders']
                    for(let i = 0; i < rows.length; i++) {
                        let road = rows[i]['road']

                        let temp_html = `<h2>${road}</h2>`
                        $('#order-box').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="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">도로혼잡도</div>
            <div class="card-body text-dark">
                <h5 id="order-box" class="card-title"></h5>
            </div>
        </div>
    </div>
</body>
</html>

이게 index.html파일이구요 헤드부분에 맨 마지막 스크립트부분이 질문 부분이에요 ㅠ

댓글 알림