생활속 보물창고 : 일상 속 유용한 정보를 공유드립니다.

 

 

 

Flask에서 AJAX를 통해 배열 데이터를 받는 과정은 다음과 같습니다:

 

1. 클라이언트 사이드 (JavaScript): AJAX 요청을 통해 서버로 데이터를 전송합니다.

2. 서버 사이드 (Flask): 전송받은 데이터를 처리합니다.

 

클라이언트 사이드 (JavaScript)

 

AJAX 요청을 생성하여 배열 데이터를 JSON 형식으로 전송하는 예시입니다. 여기서는 jQuery의 `$.ajax` 메서드를 사용합니다.

 

// JavaScript 예시
$(document).ready(function() {
var dataArray = [1, 2, 3, 4, 5]; // 전송할 배열 데이터

$.ajax({
url: '/your-endpoint', // Flask 라우트 경로
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(dataArray), // 배열을 JSON 문자열로 변환
success: function(response) {
console.log(response); // 서버로부터의 응답 처리
},
error: function(error) {
console.log(error); // 에러 처리
}
});
});

서버 사이드 (Flask)

 

Flask에서는 `request` 객체를 사용하여 AJAX 요청으로 전송된 데이터를 받습니다.

 

// JavaScript 예시
$(document).ready(function() {
var dataArray = [1, 2, 3, 4, 5]; // 전송할 배열 데이터

$.ajax({
url: '/your-endpoint', // Flask 라우트 경로
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(dataArray), // 배열을 JSON 문자열로 변환
success: function(response) {
console.log(response); // 서버로부터의 응답 처리
},
error: function(error) {
console.log(error); // 에러 처리
}
});
});

# Flask 예시
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/your-endpoint', methods=['POST'])
def receive_data():
data = request.json  # JSON 데이터를 Python 객체로 변환
print(data)  # 데이터 확인 (예: [1, 2, 3, 4, 5])

# 추가적인 데이터 처리 ...

return jsonify({"message": "Data received successfully"})  # 응답 전송

if __name__ == '__main__':
app.run(debug=True)

이 예시에서는 클라이언트로부터 받은 JSON 데이터를 Python 객체로 변환하고, 서버 측에서 처리한 후에 간단한 JSON 응답을 클라이언트에게 돌려보냅니다.

 

주의 사항

 

- 클라이언트 측에서 데이터를 전송할 때 `contentType: 'application/json'`을 지정해야 서버가 올바르게 JSON 데이터를 인식할 수 있습니다.
- Flask 서버는 기본적으로 크로스 오리진 요청(CORS)을 허용하지 않으므로, 다른 도메인에서의 AJAX 요청을 허용하려면 추가적인 설정이 필요할 수 있습니다.
반응형

공유하기

facebook twitter kakaoTalk kakaostory naver band