[Flask] Ajax로 data 받고 jsp파일로 데이터 전송

html

<label class="tab" for="radio-5" id="radio-5"> 
	<img src="resources/images/bell.svg" alt="알림" name="bell"> 
	<span class="notification">2</span>
</label> 

<div class="" id="page5-content" style="display: none;">
</div>

js

/* 알림 클릭 시 알림 데이터 확인*/
	$("#radio-5").click(function(){
			var id = '${result.u_id}';
			var postdata = {'u_id':id};
			
			$.ajax({
				type:'post',
				url : "http://127.0.0.1:9000/webAlarm",
				/*data : JSON.stringify(postdata),*/
				data : postdata,
				dataType : 'JSON',
				/*contentType : 'application/json',*/
				success : function(result){
					/*console.log(result);
					console.log(result[0].car_num);*/
					for(let i = 0; i < result.length; i++){
						$('#page5-content').append(
								`<table>
									<tr>
										<td>자동차 이미지</td>
										<td>자동차 번호</td>
										<td>알림 내용</td>
										<td>알림 시간</td>
										<td>알림 읽음 여부</td>
										<td>알림 읽음 일시</td>
									<tr>
									<tr>
										<td>\${result[i].car_img_link}</td>
										<td>\${result[i].car_num}</td>
										<td>\${result[i].sac_content}</td>
										<td>\${result[i].sac_at}</td>
										<td>\${result[i].sac_read}</td>
										<td>\${result[i].sac_read_at}</td>
									</tr>
								</table>`)
					}
				},
				error : function(e){
					alert("요청 실패");
				}
			})
		});

=> JSON 데이터 형태로 flask에 전송

=> flask에서 수집된 데이터로 sql 쿼리문 조회 뒤 데이터를 result로 받아옴

=> ★이때, ajax는 데이터를 전송하고 전송받는 페이지가 ajax를 작성한 페이지인 곳에서만 이루어지기 때문에 유의!!

 

---

flask

[insert]

# 테이블에 행 1개 삽입
import mysql.connector



mydb = mysql.connector.connect(

  host="url 계정",
    
  port = 포트번호,

  user="계정",

  password="계정 비밀번호",

  database="DB이름"

)

mycursor = mydb.cursor()

# tb_cctv1
# sql = "INSERT INTO tb_cctv1(u_id, rtsp_address, rtsp_address2, cctv_loc) VALUES(%s, %s, %s, %s)"
# val = ("test3", "rtsp://210.99.70.120:1935/live/cctv009.stream", "rtsp://210.99.70.120:1935/live/cctv015.stream", "이건 몰라유")

# tb_security_alarm_human
# sql = "INSERT INTO tb_security_alarm_human(cctv_id, sah_content, sah_at, sah_read, sah_read_at, human_img_link, sah_total, u_id) VALUES(%s, %s, %s, %s, %s, %s, %d, %s)"
# val = ("20231E483851250911EE894C0242AC14000B", )

# tb_security_alarm_car
sql = "INSERT INTO tb_security_alarm_car(cctv_id, car_num, car_inout_at, sac_content, sac_at, sac_read, sac_read_at, car_img_link, u_id) VALUES(%s, %s, %s, %s, %s, %s, %s, %s, %s)"
val = ("20231E483851250911EE894C0242AC14000B", "33바 3333", time.strftime('%Y-%m-%d %H:%M:%S'), "차량 침입!!!", time.strftime('%Y-%m-%d %H:%M:%S'), "N", time.strftime('%Y-%m-%d %H:%M:%S'), "이미지는 잠깐 나중에", "test1")

mycursor.execute(sql, val)

mydb.commit()

print(mycursor.rowcount, "record inserted.")

[select]

# Select 쿼리문
def db_connector(u_id):
    db = pymysql.connect(host='url 계정', port=포트번호, user='계정', passwd='걔정 비밀번호', db='DB이름', charset='utf8')
    cursor = db.cursor()
#     sql = cctv_select
    sql = f"SELECT * FROM tb_security_alarm_car WHERE U_ID='{u_id}';"
    cursor.execute(sql)
    # 컬럼 이름들을 가져옵니다.
    columns = [col[0] for col in cursor.description]
    
    # fetchall()로 조회된 데이터를 dict 형태로 변환하여 리스트에 추가합니다.
    result_list = []
    for row in cursor.fetchall():
        result_dict = dict(zip(columns, row))
        result_list.append(result_dict)
    db.close()
    return result_list

=> dict 오류가 나길래 dict 형태로 변환하여 리스트에 추가되는 코드를 작성

 

[데이터 수집 및 실행]

# 데이터 수집하고 쿼리실행
@app.route("/webAlarm", methods = ["POST"])
def webAlarm():
    value = request.form.get('u_id')
    print(value)
    lst = db_connector(value)
    print(lst)
    return jsonify(lst)

    
if __name__=='__main__':
    app.run(host='127.0.0.1',port=9000)

---

실행화면

---

+) CORS 에러 해결 방법

수정 전

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

수정 후

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/tmp

아래 문구 복사해서 넣어주면 됨

 --disable-web-security --disable-gpu --user-data-dir=~/tmp

출처)

https://i5i5.tistory.com/935

CORS 에러 해결방법. Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: Cross origin requests