Python (40)

Python

[Python] 23장 axios 또는 ajax를 이용한 동기, 비동기

반응형

 

axios를 이용한 동기(sync)와 비동기(async)

 

 

  • 기본

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/async.html")


if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

async.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>

</body>
</html>

 

결과 화면1

 

 

 

  • async

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/async.html")

@app.route('/get1', methods=['POST'])
def get1():
    return jsonify(num = 1)

@app.route('/get2', methods=['POST'])
def get2():
    return jsonify(num = 2)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

async.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
function fn_async(){
	var a = 0;
	var b = 0;
	
	axios.post("/get1").then((res) => {
		a = res.data.num;
		console.log("ajax1",res.data.num);
	});
	axios.post("/get2").then((res) => {
		b = res.data.num;
		console.log("ajax2",res.data.num);
	});
	
	var sum = a + b;
	console.log("sum",sum)
	console.log("ajax3");
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>
<a href="javascript:fn_async()">async</a><br>
</body>
</html>

 

결과 화면2

 

 

 

  • sync

=> await 사용

 

 

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp
import time

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/async_await.html")

@app.route('/get1', methods=['POST'])
def get1():
    time.sleep(1) #시간지연
    return jsonify(num = 1)

@app.route('/get2', methods=['POST'])
def get2():
    return jsonify(num = 2)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

async_await.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
async function fn_async(){
	var a = 0;
	var b = 0;
	
	var res = await axios.post("/get1");
	a = res.data.num;
	console.log("a",a);
	
	var res = await axios.post("/get2");
	b = res.data.num;
	console.log("b",b);
	
	var sum = a + b;
	console.log("sum",sum);
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>
<a href="javascript:fn_async()">async</a><br>
</body>
</html>

 

결과 화면4

 

 

 

  • sleep 사용 (시간 지연)

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp
import time

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/async.html")

@app.route('/get1', methods=['POST'])
def get1():
    time.sleep(1) #시간지연
    return jsonify(num = 1)

@app.route('/get2', methods=['POST'])
def get2():
    return jsonify(num = 2)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

결과 화면3 : time.sleep()를 넣으면 됨

 

 

 

제이쿼리를 이용한 동기(sync)와 비동기(async)

 

 

  • 기본

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp
import time

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/async.html")

@app.route('/get1', methods=['POST'])
def get1():
    return jsonify(num = 1)

@app.route('/get2', methods=['POST'])
def get2():
    return jsonify(num = 2)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

async.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
function fn_async(){
	$.ajax({
        type: 'POST',
        url: '/get1',
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp);
        }
    })
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>
<a href="javascript:fn_async()">async</a><br>
</body>
</html>

 

결과 화면5 : async 클릭 시

 

 

 

  • async

async.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
function fn_async(){
	var a = 0;
	var b = 0;
	
	$.ajax({
        type: 'POST',
        url: '/get1',
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp.num);
            a = resp.num;
        }
    })
	$.ajax({
        type: 'POST',
        url: '/get2',
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp.num);
            b = resp.num;
        }
    })
    
    var sum = a + b;
	console.log("sum",sum);
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>
<a href="javascript:fn_async()">async</a><br>
</body>
</html>

 

결과 화면6

 

 

 

  • sync

=> async : false 사용

 

 

async.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">
function fn_sync(){
	var a = 1;
	var b = 2;
	var sum = a+b;
	
	console.log("sum",sum);
}
function fn_async(){
	var a = 0;
	var b = 0;
	
	$.ajax({
        type: 'POST',
        url: '/get1',
        async : false,
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp.num);
            a = resp.num;
        }
    })
	$.ajax({
        type: 'POST',
        url: '/get2',
        async : false,
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp.num);
            b = resp.num;
        }
    })
    
    var sum = a + b;
	console.log("sum",sum);
}
</script>
</head>
<body> 
ASYNC<br>
<a href="javascript:fn_sync()">sync</a><br>
<a href="javascript:fn_async()">async</a><br>
</body>
</html>

 

결과 화면7

 

 

 

MVVM과 MVC 차이

 

 

MVVM는 깜빡임이 없음

정보를 하나만 보여주기 위해서 따로 페이지를 만들어야 함

 

 

MVC는 깜빡임이 있음

URL을 통해 편히 정보를 보여줄 수 있음

 

 

반응형

'Python' 카테고리의 다른 글

[Python] 25장 flask를 Docker로 띄우기  (0) 2024.04.11
[Python] 24장 docker 설치 및 MySQL 설치  (0) 2024.04.11
[Python] 21장 제이쿼리, 또는 axios 를 이용한 flask  (0) 2024.04.09
[Python] 20장 제이쿼리 예시  (0) 2024.04.08
[Python] 19장 자바스크립트 예시  (0) 2024.04.08
카테고리 없음

[Python] 22장 axios를 이용한 MVVM 패턴

반응형

 

axios를 이용한 dao 연결

 

 

daoemp.py

import pymysql

class Daoemp:
    def __init__(self):
        self.con = pymysql.connect(host='localhost', port=3305, user='root',
                              password='python', db='python', charset='utf8')

        self.cur = self.con.cursor(pymysql.cursors.DictCursor)
    
    def selectList(self):
        sql = f"""
            SELECT
                e_id,
                e_name,
                gen,
                addr
            FROM
                emp
        """
        self.cur.execute(sql)
        list = self.cur.fetchall()
        return list
    
    def select(self,e_id):
        sql = f"""
            SELECT
                e_id,
                e_name,
                gen,
                addr
            FROM
                emp
            WHERE
                e_id = '{e_id}'
        """
        self.cur.execute(sql)
        # list = self.cur.fetchall()
        list = self.cur.fetchone()
        return list
        # return list[0] #vo 방식으로 리턴해주기에 권장함

    def insert(self,e_id,e_name,gen,addr):
        sql = f"""
            INSERT INTO 
                EMP (e_id, e_name, gen, addr)
            VALUES ('{e_id}','{e_name}','{gen}','{addr}')
        """
        cnt = self.cur.execute(sql)
        self.con.commit() #꼭 해야함
        return cnt
        
    def update(self,e_id,e_name,gen,addr):
        sql = f"""
            UPDATE emp 
            SET
                e_name = '{e_name}',
                gen = '{gen}',
                addr = '{addr}'
            WHERE
                e_id = '{e_id}'
        """
        cnt = self.cur.execute(sql)
        self.con.commit() #꼭 해야함
        return cnt
        
    def delete(self,e_id):
        sql = f"""
            DELETE FROM emp 
            WHERE
                e_id = '{e_id}'
        """
        cnt = self.cur.execute(sql)
        self.con.commit() #꼭 해야함
        return cnt

    def __del__(self):
        self.cur.close()
        self.con.close()
        
if __name__ == '__main__':
    de = Daoemp()
    cnt = de.delete('3')
    print("cnt",cnt)

 

 

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/emp.html")

@app.route('/axios', methods=['POST'])
def axios():
    data = request.get_json()
    # print(data)
    print(data['menu'])
    return jsonify(message = "ok")

@app.route('/emp_list', methods=['POST'])
def emp_list():
    de = Daoemp()
    list = de.selectList()
    return jsonify(list=list)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function myclick(){
    axios.post("/emp_list").then((res) => {
    	var obj_tbody = document.getElementById("my_tbody");
    	var list = res.data.list;
        console.log(list);
        console.log(list.length);
        
       	var txt = "";
        for(var i=0; i<list.length;i++) {
        	txt += `
        	<tr>
    			<td>${list[i].e_id}</td>
    			<td>${list[i].e_name}</td>
    			<td>${list[i].gen}</td>
    			<td>${list[i].addr}</td>
    		</tr>
        	`;
        }
        	obj_tbody.innerHTML = txt;
    });
}
</script>
</head>
<body>
EMP<br>
<a href="javascript:myclick()">list</a>
<table border="1px">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">
				검색된 데이터가 없습니다.
			</td>
		</tr>
	</tbody>
</table>
</body>
</html>

 

결과 화면1

 

 

 

  • 사번 클릭 시 데이터 출력

 

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/emp.html")

@app.route('/axios', methods=['POST'])
def axios():
    data = request.get_json()
    # print(data)
    print(data['menu'])
    return jsonify(message = "ok")

@app.route('/emp_list', methods=['POST'])
def emp_list():
    de = Daoemp()
    list = de.selectList()
    return jsonify(list=list)

@app.route('/emp_one', methods=['POST'])
def emp_one():
    data = request.get_json()
    e_id = data['e_id']
    
    de = Daoemp()
    vo = de.select(e_id);
    return jsonify(vo=vo)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
    axios.post("/emp_list").then((res) => {
    	var obj_tbody = document.getElementById("my_tbody");
    	var list = res.data.list;
        console.log(list);
        console.log(list.length);
        
       	var txt = "";
        for(var i=0; i<list.length;i++) {
        	var e_id = list[i].e_id;
        	var e_name = list[i].e_name;
        	var gen = list[i].gen;
        	var addr = list[i].addr;
        	txt += `
        	<tr>
    			<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
    			<td>${e_name}</td>
    			<td>${gen}</td>
    			<td>${addr}</td>
    		</tr>
        	`;
        }
        	obj_tbody.innerHTML = txt;
    });
}
function fn_one(e_id) {
	var param = {'e_id':e_id}
	console.log("param", param);
	
	axios.post("/emp_one",param).then((res) => {
// 		console.log(res.data.vo);
		var obj_e_id = document.getElementById("e_id")
		var obj_e_name = document.getElementById("e_name")
		var obj_gen = document.getElementById("gen")
		var obj_addr = document.getElementById("addr")
		
		var vo = res.data.vo;
		obj_e_id.value = vo.e_id;
		obj_e_name.value = vo.e_name;
		obj_gen.value = vo.gen;
		obj_addr.value = vo.addr;
	});
}
</script>
</head>
<body onload="fn_list()"> <!-- onload로 시작시 출력되게 함 --> 
EMP<br>

<table border="1px">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">
				검색된 데이터가 없습니다.
			</td>
		</tr>
	</tbody>
</table>
<table border="1px">
	<tr>
		<td>사번</td>
		<td>
			<input typd="text" id="e_id">
		</td>
	</tr>
	<tr>
		<td>이름</td>
		<td>
			<input type="text" id="e_name">
		</td>
	</tr>
	<tr>
		<td>성별</td>
		<td>
			<input type="text" id="gen">
		</td>
	</tr>
	<tr>
		<td>주소</td>
		<td>
			<input type="text" id="addr">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="추가">
			<input type="button" value="수정">
			<input type="button" value="삭제">
		</td>
	</tr>
</table>
</body>
</html>

 

결과 화면2

 

 

 

  • 데이터 추가

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response
from Cython.Compiler.Errors import message
from day12.daoemp import Daoemp

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/emp.html")

@app.route('/axios', methods=['POST'])
def axios():
    data = request.get_json()
    # print(data)
    print(data['menu'])
    return jsonify(message = "ok")

@app.route('/emp_list', methods=['POST'])
def emp_list():
    de = Daoemp()
    list = de.selectList()
    return jsonify(list=list)

@app.route('/emp_one', methods=['POST'])
def emp_one():
    data = request.get_json()
    e_id = data['e_id']
    
    de = Daoemp()
    vo = de.select(e_id);
    return jsonify(vo=vo)

@app.route('/emp_add', methods=['POST'])
def emp_add():
    data = request.get_json()
    e_id = data['e_id']
    e_name = data['e_name']
    gen = data['gen']
    addr = data['addr']
    
    de = Daoemp()
    cnt = de.insert(e_id, e_name, gen, addr);
    return jsonify(cnt=cnt)

if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
    axios.post("/emp_list").then((res) => {
    	var obj_tbody = document.getElementById("my_tbody");
    	var list = res.data.list;
        console.log(list);
        console.log(list.length);
        
       	var txt = "";
        for(var i=0; i<list.length;i++) {
        	var e_id = list[i].e_id;
        	var e_name = list[i].e_name;
        	var gen = list[i].gen;
        	var addr = list[i].addr;
        	txt += `
        	<tr>
    			<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
    			<td>${e_name}</td>
    			<td>${gen}</td>
    			<td>${addr}</td>
    		</tr>
        	`;
        }
        	obj_tbody.innerHTML = txt;
    });
}
function fn_one(e_id) {
	var param = {'e_id':e_id}
	console.log("param", param);
	
	axios.post("/emp_one",param).then((res) => {
// 		console.log(res.data.vo);
		var obj_e_id = document.getElementById("e_id")
		var obj_e_name = document.getElementById("e_name")
		var obj_gen = document.getElementById("gen")
		var obj_addr = document.getElementById("addr")
		
		var vo = res.data.vo;
		obj_e_id.value = vo.e_id;
		obj_e_name.value = vo.e_name;
		obj_gen.value = vo.gen;
		obj_addr.value = vo.addr;
	});
}
function fn_add(){
	var obj_e_id = document.getElementById("e_id");
	var obj_e_name = document.getElementById("e_name");
	var obj_gen = document.getElementById("gen");
	var obj_addr = document.getElementById("addr");
// 	console.log(e_id);
	var param = {
			'e_id':obj_e_id.value,
			'e_name':obj_e_name.value,
			'gen':obj_gen.value,
			'addr':obj_addr.value
	}
	
	axios.post("/emp_add", param).then((res) => {
		console.log(res);
		
		var cnt = res.data.cnt
		if(cnt == 1) {
			alert("정상적으로 출력되었습니다.");
			
			obj_e_id.value = "";
			obj_e_name.value = "";
			obj_gen.value = "";
			obj_addr.value = "";
			
			fn_list();
		} else {
			alert("추가도중 문제가 생겼습니다.");
		}
	});
}
</script>
</head>
<body onload="fn_list()"> <!-- onload로 시작시 출력되게 함 --> 
EMP<br>

<table border="1px">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">
				검색된 데이터가 없습니다.
			</td>
		</tr>
	</tbody>
</table>
<table border="1px">
	<tr>
		<td>사번</td>
		<td>
			<input typd="text" id="e_id">
		</td>
	</tr>
	<tr>
		<td>이름</td>
		<td>
			<input type="text" id="e_name">
		</td>
	</tr>
	<tr>
		<td>성별</td>
		<td>
			<input type="text" id="gen">
		</td>
	</tr>
	<tr>
		<td>주소</td>
		<td>
			<input type="text" id="addr">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="추가" onclick="fn_add()">
			<input type="button" value="수정">
			<input type="button" value="삭제">
		</td>
	</tr>
</table>
</body>
</html>

 

결과 화면3-1

 

결과 화면3-2

 

 

 

  • 데이터 수정

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
    axios.post("/emp_list").then((res) => {
    	var obj_tbody = document.getElementById("my_tbody");
    	var list = res.data.list;
        console.log(list);
        console.log(list.length);
        
       	var txt = "";
        for(var i=0; i<list.length;i++) {
        	var e_id = list[i].e_id;
        	var e_name = list[i].e_name;
        	var gen = list[i].gen;
        	var addr = list[i].addr;
        	txt += `
        	<tr>
    			<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
    			<td>${e_name}</td>
    			<td>${gen}</td>
    			<td>${addr}</td>
    		</tr>
        	`;
        }
        	obj_tbody.innerHTML = txt;
    });
}
function fn_mod() {
	var obj_e_id = document.getElementById("e_id");
	var obj_e_name = document.getElementById("e_name");
	var obj_gen = document.getElementById("gen");
	var obj_addr = document.getElementById("addr");

	var param = {
		'e_id':obj_e_id.value,
		'e_name':obj_e_name.value,
		'gen':obj_gen.value,
		'addr':obj_addr.value
	}
	
	axios.post("/emp_mod", param).then((res) => {
		console.log(res);
		
		var cnt = res.data.cnt
		if(cnt == 1) {
			alert("정상적으로 수정되었습니다.");
			
			obj_e_id.value = "";
			obj_e_name.value = "";
			obj_gen.value = "";
			obj_addr.value = "";
			
			fn_list();
		} else {
			alert("수정도중 문제가 생겼습니다.");
		}
	});
}
</script>
</head>
<body onload="fn_list()"> <!-- onload로 시작시 출력되게 함 --> 
EMP<br>

<table border="1px">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">
				검색된 데이터가 없습니다.
			</td>
		</tr>
	</tbody>
</table>
<table border="1px">
	<tr>
		<td>사번</td>
		<td>
			<input typd="text" id="e_id">
		</td>
	</tr>
	<tr>
		<td>이름</td>
		<td>
			<input type="text" id="e_name">
		</td>
	</tr>
	<tr>
		<td>성별</td>
		<td>
			<input type="text" id="gen">
		</td>
	</tr>
	<tr>
		<td>주소</td>
		<td>
			<input type="text" id="addr">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="추가" >
			<input type="button" value="수정" onclick="fn_mod()">
			<input type="button" value="삭제" >
		</td>
	</tr>
</table>
</body>
</html>

 

결과 화면4

 

 

 

  • 데이터 삭제

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
    axios.post("/emp_list").then((res) => {
    	var obj_tbody = document.getElementById("my_tbody");
    	var list = res.data.list;
        console.log(list);
        console.log(list.length);
        
       	var txt = "";
        for(var i=0; i<list.length;i++) {
        	var e_id = list[i].e_id;
        	var e_name = list[i].e_name;
        	var gen = list[i].gen;
        	var addr = list[i].addr;
        	txt += `
        	<tr>
    			<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
    			<td>${e_name}</td>
    			<td>${gen}</td>
    			<td>${addr}</td>
    		</tr>
        	`;
        }
        	obj_tbody.innerHTML = txt;
    });
}
function fn_del() {
	var obj_e_id = document.getElementById("e_id");
	var obj_e_name = document.getElementById("e_name");
	var obj_gen = document.getElementById("gen");
	var obj_addr = document.getElementById("addr");

	var param = {
		'e_id':obj_e_id.value,
	}
	
	axios.post("/emp_del", param).then((res) => {
		console.log(res);
		
		var cnt = res.data.cnt
		if(cnt == 1) {
			alert("정상적으로 삭제되었습니다.");
			
			obj_e_id.value = "";
			obj_e_name.value = "";
			obj_gen.value = "";
			obj_addr.value = "";
			
			fn_list();
		} else {
			alert("삭제도중 문제가 생겼습니다.");
		}
	});
}
</script>
</head>
<body onload="fn_list()"> <!-- onload로 시작시 출력되게 함 --> 
EMP<br>

<table border="1px">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">
				검색된 데이터가 없습니다.
			</td>
		</tr>
	</tbody>
</table>
<table border="1px">
	<tr>
		<td>사번</td>
		<td>
			<input typd="text" id="e_id">
		</td>
	</tr>
	<tr>
		<td>이름</td>
		<td>
			<input type="text" id="e_name">
		</td>
	</tr>
	<tr>
		<td>성별</td>
		<td>
			<input type="text" id="gen">
		</td>
	</tr>
	<tr>
		<td>주소</td>
		<td>
			<input type="text" id="addr">
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="추가" >
			<input type="button" value="수정" >
			<input type="button" value="삭제" onclick="fn_del()">
		</td>
	</tr>
</table>
</body>
</html>

 

결과 화면5

 

 

반응형
Python

[Python] 21장 제이쿼리, 또는 axios 를 이용한 flask

반응형

 

제이쿼리 이용

 

 

  • 메시지 값 전달

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/jq01.html")

@app.route('/ajax', methods=['POST'])
def ajax():
    return jsonify(message = "ok")


if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

jq01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">
function myclick(){
	var param = {
		'menu':"짬뽕"
	}
	
	$.ajax({
        type: 'POST',
        url: '/ajax',
        data: JSON.stringify(param),
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp);
            alert(resp.message);
        }
    })
}

$(document).ready(function(){
	$("#btn").on("click", function(event) {
		myclick();
	});
});
</script>
</head>
<body>
EX01<br>
<span id="my_span">Good Morning</span>
<input type="button" value="click" id="btn">
</body>
</html>

 

결과 화면1

 

 

 

  • flask에서 파라미터 값 확인

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/jq01.html")

@app.route('/ajax', methods=['POST'])
def ajax():
    data = request.get_json()
    print(data['menu'])
    return jsonify(message = "ok")


if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

jq01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.7.1.js"></script>
<script type="text/javascript">
function myclick(){
	var param = {
		'menu':"짬뽕"
	}
	
	$.ajax({
        type: 'POST',
        url: '/ajax',
        data: JSON.stringify(param),
        dataType : 'JSON',
        contentType: "application/json",
        success: function(resp){
            console.log(resp);
            alert(resp.message);
        }
    })
}

$(document).ready(function(){
	$("#btn").on("click", function(event) {
		myclick();
	});
});
</script>
</head>
<body>
EX01<br>
<span id="my_span">Good Morning</span>
<input type="button" value="click" id="btn">
</body>
</html>

 

결과 화면2

 

 

 

axios  이용한 CDN 방식

 

 

파일 경로

 

 

 

  • 메시지 값 전달

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/jq01.html")

@app.route('/axios', methods=['POST'])
def axios():
    # data = request.get_json()
    # print(data.data)
    return jsonify(message = "ok")


if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

axios.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function myclick(){
	var param = {
		'menu':"짬뽕"
	}
	
    axios.post("/axios").then((res) => {
        console.log(res);
    });
}
</script>
</head>
<body>
EX01<br>
<span id="my_span">Good Morning</span>
<input type="button" value="click" id="btn" onclick="myclick()">
</body>
</html>

 

결과 화면3

 

 

 

  • flask에서 파라미터 값 확인

my_flask.py

from flask import Flask,request,render_template, redirect, jsonify
from flask.helpers import make_response

app = Flask(__name__)

@app.route('/')
def main():
   return redirect("static/jq01.html")

@app.route('/axios', methods=['POST'])
def axios():
    data = request.get_json()
    # print(data)
    print(data['menu'])
    return jsonify(message = "ok")


if __name__ == '__main__':
  app.run(debug=True, port=80, host='0.0.0.0')

 

 

axios.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function myclick(){
	var param = {
		'menu':"짬뽕"
	}
	
    axios.post("/axios", param).then((res) => {
        console.log(res);
        console.log(res.data);
    });
}
</script>
</head>
<body>
EX01<br>
<span id="my_span">Good Morning</span>
<input type="button" value="click" id="btn" onclick="myclick()">
</body>
</html>

 

결과 화면4

 

 

반응형

'Python' 카테고리의 다른 글

[Python] 24장 docker 설치 및 MySQL 설치  (0) 2024.04.11
[Python] 23장 axios 또는 ajax를 이용한 동기, 비동기  (0) 2024.04.11
[Python] 20장 제이쿼리 예시  (0) 2024.04.08
[Python] 19장 자바스크립트 예시  (0) 2024.04.08
[Python] 18.5장 과제  (0) 2024.04.05
1 2 3 4 5 6 7 8 ··· 14

티스토리툴바