잉?

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 해결법 + JSON이란? 본문

에러메시지,에러해결

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 해결법 + JSON이란?

Jye_647 2023. 5. 18. 23:57

일단 나는 파이썬 flask를 이용해 미니프로젝트를 만들고 있었다.

근데 아래와 같은 오류가 발생했다.

 

 

뭐 명확한 이유도 없고.. 그저 데이터들을 JSON을 통해 가져오려 하니깐

"html파일은 JSON파일이 아니라고 SyntaxError가 났다."라고만 메시지가 뜬다.

*SyntaxError는 문법적으로 유효하지 않을 때 나는 에러다.

 

구글링을 한 결과 오류 메시지는 같은데 해결법이 다 달랐다.

 

첫번째로, <head>부분에 jquery 스크립트를 붙여넣지 않아서 발생한 사람도 있었고,

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

 

 

두번째로, fetch("guestbook") 에서 /를 빼먹어서 발생한 사람도 있었다.(밑의 코드블럭 처럼 작성해야 함)

function save_comment() {
      let formData = new FormData();

      let name = $("#name").val();
      let comment = $("#comment").val();

      formData.append("name_give", name);
      formData.append("comment_give", comment);

      fetch("/guestbook", { method: "POST", body: formData })
        .then((res) => res.json())
        .then((data) => {
          alert(data["msg"]);
          window.location.reload();
        });
    }

 

나는 jsonify를 이용해 테이블의 데이터와 html파일을 함께 보내려고 하니깐 오류가 난 경우 였다.

(왜 같이 보내면 안되는지 아직도 잘 모르겠지만... 라우팅의 이해도가 부족한건지..)

@app.route('/guestbook')
def guest():
   return render_template('/guestbook.html')
-----------------------------------------------화면을 렌더링해주는 URL

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
   all_comments = list(db.comments.find({},{'_id':False}))
   return jsonify({'result' : all_comments})
-----------------------------------------------데이터를 전송해주는 jsonify?

위의 코드 중 URL을 분리해줬다. @app.route()부분!

@app.route('/guestbookView')
def guest():
   return render_template('/guestbook.html')
-----------------------------------------------화면을 렌더링해주는 URL

@app.route("/guestbook", methods=["GET"])
def guestbook_get():
   all_comments = list(db.comments.find({},{'_id':False}))
   return jsonify({'result' : all_comments})
-----------------------------------------------데이터를 전송해주는 jsonify?

 

잘 작동 되는것을 확인할 수 있다ㅜ

이게 뭐라고 날 이렇게 힘들게 하는지,,

 

위의 오류메시지에서 보았듯 JSON이란 무엇일까?

- 서버에서 클라이언트로 데이터를 내려줄 때 즉, dictionary(사전) 형태로 내려주는 걸 말한다.

- 사전형 데이터

- key와 value를 1대 1로 대응시킨 형태이다. { key : value }

예시) {'name' : '티스토리"} 

 

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

JSON 데이터를 가독성 있게 볼 수 있도록 해주는 확장 프로그램

 

JSONVue

Validate and view JSON documents

chrome.google.com

 

 

'에러메시지,에러해결' 카테고리의 다른 글

Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot construct instance of `` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator)]  (0) 2023.07.06
인텔리제이 SpringBoot 실행 시 Task :test 에러 해결  (0) 2023.06.15
Port 8080 was already in use. + 8080 포트 죽이기(강제 종료)  (0) 2023.06.12
NumberFormatException 에러 해결  (0) 2023.06.01
Exception in thread "main" java.lang.StackOverflowError 해결 + 상호 참조  (0) 2023.05.31
'에러메시지,에러해결' Related Articles more
Comments