flask12 use form

AJAX 통신하기 전에 폼으로 통신하는 방법에 대해서 먼저 알아 본다.

파이썬에서 데이터를 JSON으로 변환 하는 방법

flask에서는 서버에서 응답하기 위해 jsonify와 json.dumps를 이용하는 방법이 있다.
jsonify 함수는 아스키 이스케이프 인코딩을 적용하기 때문에 한글이 있으면 깨진다.
이때는 json.dumps 함수를 사용한다.

response = jsonify(userlist)

response = json.dumps(userlist, default=str, ensure_ascii=False)

jsonify 와 json.dumps, dictionary 사용시 클라이언트로 반환하는 Content type이다.

명령어	플라스크 웹 리퀘스트 리턴 함수
jsonify : application/json	jreturn jsonify({'token' : token}), 201
json.dumps : text/html; charset=utf-8	return json.dumps({'token' : token}), 201
dictionary: application/json	return {'token' : token}, 200

폼으로 서버와 통신하기

ajax를 사용하지 않고 폼을 이용해 서버로 데이터를 보내는 방식이다.

html


<form action = "/main/form_to_json" method = "POST">
    <p>이름: <input type = "text" name = "Name" /></p>
    <p>메모: <textarea type ="text" name = "Memo" placeholder="메모를 남겨 주세요"></textarea></p>
    <p><input type = "submit" value = "보내기" /></p>
</form>

python

@bp.route('/form_to_json', methods=['POST', 'GET'])
def form_to_json():
    print('Request URL: http://127.0.0.1:8888/main/form_to_json')

    if request.method == 'GET':
        print(f"GET result['Name']={request.args['Name']}")
        print(f"GET result['Address']={request.args['Memo']}")
    else:
        result = request.form
        print(f"POST result['Name']={result['Name']}")
        print(f"POST result['Address']={result['Memo']}")

    response = "alert('요청 완료. 확인 버튼을 누르면 메이페이지로 이동 합니다'); location.replace('/main/index');"
    return f"<script type='text/javascript'>{response}</script>"

GET으로 보낼때 파이썬 서버 로그

Request URL: http://127.0.0.1:8888/main/form_to_json
GET result['Name']=김철수
GET result['Address']=aaaa
127.0.0.1 - - [12/Jul/2023 06:43:08] "GET /main/form_to_json?Name=김철수&Memo=aaaa HTTP/1.1" 200 -
127.0.0.1 - - [12/Jul/2023 06:43:11] "GET /main/index HTTP/1.1" 200 -

POST로 보낼때 파이썬 서버 로그

Request URL: http://127.0.0.1:8888/main/form_to_json
POST result['Name']=김철수
POST result['Address']=aaa
127.0.0.1 - - [12/Jul/2023 06:44:29] "POST /main/form_to_json HTTP/1.1" 200 -
127.0.0.1 - - [12/Jul/2023 06:44:31] "GET /main/index HTTP/1.1" 200 -

<form> 태그의 action 속성은 서버 URL을 명시한다.
<form action="URL">

<form> 태그의 input에 있는 name 속성은 서버에서는 검색 키로 사용된다.
여기서 name은 각각 "Name", "Memo"이다.

파이썬의 플라스크에서 get 방식일때 값을 구하기

request.args[key]
request.args['Name'] 또는 request.args.get('Name')
request.args['Memo'] 또는 request.args.get('Memo')

파이썬의 플라스크에서 post 방식일때 값을 구하기

request.form[key]
request.form['Name']
request.form['Memo']

timeout: 받기 기다리는 시간으로 밀리 세컨드 단위이다.
contentType: 보내는 데이터 타입으로 (request data type)
dataType: 받는 데이터 타입으로 r(eesponse dataType)
jqXHR : $.ajax()에 의해 반환되는 XMLHttpRequest 오브젝트의 상위 객체이다.

다운로드:
/templates/test.html
controller/main_controller.py

ajax_test.zip

참고)
flask jsonify 와 json.dumps의 차이
https: //velog.io/@matisse/flask-jsonify-와-json.dumps의-차이