myflask.py
from flask import Flask, redirect
from flask.json import jsonify
from flask.globals import request
app = Flask(__name__)
@app.route('/')
def main():
return redirect('/static/ajax.html')
@app.route('/hello.ajax', methods=['POST'])
def ajax_hello():
menu = request.form['menu']
# json형태로 정보 보내기
print("menu", menu)
return jsonify({"message":"ok"})
@app.route('/fetch.ajax', methods=['POST'])
def ajax_fetch():
menu = request.get_json()['menu']
# json형태로 정보 보내기
print("menu", menu)
return jsonify({"message":"ok"})
@app.route('/axios.ajax', methods=['POST'])
def ajax_axios():
menu = request.get_json()['menu']
# json형태로 정보 보내기
print("menu", menu)
return jsonify({"message":"ok"})
if __name__ == '__main__':
# app.run(debug=True)
app.run(host="0.0.0.0", port=80, debug=True)
ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="./jquery-3.7.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function fn_ajax(){
// ajax_hello로 이동 (동기식)
/* location.href="/ajax_hello"; */
$.ajax({
url : "/hello.ajax",
type : "POST",
data : { menu : "짬뽕" },
success : function(res){
console.log(res);
console.log(res.message);
}
})
}
function fn_fetch(){
fetch('/fetch.ajax', {
method : "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({"menu":"짬뽕"})
})
.then(function(response){
console.log(response);
return response.json();
})
.then(function(res){
console.log(res);
console.log(res.message);
})
}
function fn_axios(){
axios.post('/axios.ajax', {menu:"짬뽕"}).then(function(res){
console.log(res.data)
});
}
</script>
</head>
<body>
<a href="javascript:fn_ajax()">ajax</a>
<a href="javascript:fn_fetch()">fetch</a>
<a href="javascript:fn_axios()">axios</a>
</body>
</html>
