Post 메소드 실행 후, 의도하지 않은 페이지 새로고침 문제

현상

html에서 기사 url 주소 입력 →  웹서버에서 url에 대한 기사 크롤링 → html에 출력하려고 함

그전에 간단한 테스트로 특정 변수를 Post 메소드로 html ↔ 웹서버 사이에서  데이터를 전달하는 작업을 하려고 하는 상황

html에서 데이터를 받자마자 페이지가 새로고침이 되면서 다시 받은 데이터를 처리할 수 없는 문제가 발생했다!

• 상세 상황 설명
  1. html에서 12345 입력 후, 전송 버튼 클릭
  2. js news_url 메소드의 fetch API를 통해서 웹서버와 post 방식으로 통신 실행되며 입력한 12345 값이 전달
  3. 전달받은 데이터는 제대로 출력되었고 이를 다시 반환
  4. consol.log를 통해 전달받은 데이터를 잘 받았는지 확인함
  5. 하지만 post 메소드가 실행되면서 동시에 파이썬 terminal 로그를 통해 GET 메소드도 실행되며 페이지가 새로고침 되면서  전달 받은 데이터를 처리할 수 없게됨

 

 

원인

button 속성이 submit인 것이 post 메소드 실행 이후, 페이지 새로고침의 원인이었다.

mdn web docs을 통해 form 데이터를 제출하고 문서를 새로고침한다는 것을 알 수 있음

그림 클릭 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

• 원인 분석 과정

url 변수가 전달되는 과정중에 문제의 원인이 있을 것이라고 생각

1. url 변수는 html button 태그를 통해 js 메소드 실행 

2. fetch API를 통해서 FormData 타입으로 flask 웹서버로 데이터 전달

3. 웹서버에서 받은 변수를 다시 json 형식으로 반환

4. js 에서 받은 데이터를 출력

이 과정 속에서 데이터의 속성과 사용한 메소드, 요소 등에 대해서 구글링 해보았다.

 

 

해결 방안

button type은 버튼을 클릭하여 이벤트를 실행해도 페이지가 새로고침되지 않는다.

<div class="col-auto">
    <!-- <button type="submit" class="btn btn-secondary mb-3" onclick="news_url()">전송</button> -->
    <button type="button" class="btn btn-secondary mb-3" onclick="news_url()">전송</button>
</div>

아직 공식문서를 보면서 완벽히 이해가 가지는 않는다...

CS 지식 공부를 더 해야겠다.