ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Flask에서 Ajax ,axios예제
      파이썬 2022. 6. 13. 13:50
      728x90
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.6.0.js"></script>
<script type="text/javascript">
	
function myclick(){
	//alert("myclick");
	//자바스크립트일때
	/*var obj =document.getElementById("it");
	obj.value="good evening";*/
	
	$("#it").val("good evening");
		
	
}

</script>
</head>
<body>
<input type="text" id="it" value="good morning">
<a href="javascript:myclick()">클릭</a>
	
</body>
</html>

       

      <emp_html>

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.6.0.js"></script>
<script type="text/javascript">
	
function myinit(){
	  $.ajax({
          type: "POST",
          url: "emp_list.ajax",
          data: {
             e_id:'1',
             e_name:'1',
             sex:'1',
             addr:'1'
          },
          // 지금 파이썬으로 보내는 값들.
          success: function (res) {
        	 var trs="";
        	 var list =res;
        	 for(var i=0;i<list.length; i++ ){
        		 var e_id =list[i].e_id;
        		 var e_name =list[i].e_name;
        		 var sex =list[i].sex;
        		 var addr =list[i].addr;
        		 var tr =
        		`
        			 <tr>
     				<td>${e_id}</td>
     				<td>${e_name}</td>
     				<td>${sex}</td>
     				<td>${addr}</td>
     				</tr>
        		 `;
        		trs +=tr;
        		var obj =document.querySelector("#tb");
        		obj.innerHTML =trs;
             	
        		 
        	 }
          }
     });
  
	 
	
}

</script>
</head>
<body onload="myinit()">
	<table border="1">
		<thead>
			<tr>
				<td>사번</td>
				<td>이름</td>
				<td>성별</td>
				<td>주소</td>
			</tr>
		</thead>
		<tbody id="tb">
		
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			
		
		</tbody>
		
	</table>
	
</body>
</html>

      <myflask_emp(day11)>

      from flask import Flask
from flask.globals import request
import pymysql
from flask.templating import render_template
from day11.dao_emp import DaoEmp
from flask.json import jsonify

app = Flask(__name__,static_url_path='')        
de = DaoEmp()

@app.route('/')
@app.route('/emp')
def emp():
  
    return render_template('emp.html')

@app.route('/emp.ajax',methods=['POST'])
def emp_ajax():
    
    e_id =request.form['e_id']
    print("e_id",e_id)
    return jsonify({'msg': '저장 완료!'})

@app.route('/emp_list.ajax',methods=['POST'])
def emp_list_ajax():
    
    de=DaoEmp()
    list =de.myselects()
    return jsonify(list)

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

      <select, insert하기>

      from flask import Flask
from flask.globals import request
import pymysql
from flask.templating import render_template
from day11.dao_emp import DaoEmp
from flask.json import jsonify

app = Flask(__name__,static_url_path='')        
de = DaoEmp()

@app.route('/')
@app.route('/emp')
def emp():
  
    return render_template('emp.html')

@app.route('/emp.ajax',methods=['POST'])
def emp_ajax():
    
    e_id =request.form['e_id']
    print("e_id",e_id)
    return jsonify({'msg': '저장 완료!'})

@app.route('/emp_list.ajax',methods=['POST'])
def emp_list_ajax():
    
    de=DaoEmp()
    list =de.myselects()
    return jsonify(list)

@app.route('/emp_one.ajax',methods=['POST'])
def emp_one_ajax():
    e_id =request.form['e_id']
    de=DaoEmp()
    emp =de.myselect(e_id)
    return jsonify(emp)

@app.route('/emp_add.ajax',methods=['POST'])
def emp_add_ajax():
    e_id =request.form['e_id']
    e_name =request.form['e_name']
    sex =request.form['sex']
    addr =request.form['addr']
    de=DaoEmp()
    cnt = -1
    try:
        cnt = de.myinsert(e_id, e_name, sex, addr)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})

if __name__ == '__main__':
    app.run(debug=True)
      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.6.0.js"></script>
<script type="text/javascript">
	
function myinit(){
	  $.ajax({
          type: "POST",
          url: "emp_list.ajax",
          data: {
             e_id:'1',
             e_name:'1',
             sex:'1',
             addr:'1'
          },
          // 지금 파이썬으로 보내는 값들.
          success: function (res) {
        	fn_list(res);
        
          }
     });
  
}

	function fn_one(e_id){
		//console.log(e_id);
		$.ajax({
	          type: "POST",
	          url: "emp_one.ajax",
	          data: {
	          e_id :e_id
	          },
	        
	          success: function (res) {
	        	console.log(res);
	        	var emp=res;
	        	document.querySelector("input[name='e_id']").value = emp.e_id;
	        	document.querySelector("input[name='e_name']").value = emp.e_name;
	        	document.querySelector("input[name='sex']").value = emp.sex;
	        	document.querySelector("input[name='addr']").value = emp.addr;
	        
	          }
	     });
	}
	
	function fn_list(res){
		 var list =res;
		 var trs="";
    	 for(var i=0;i<list.length; i++ ){
    		 var e_id =list[i].e_id;
    		 var e_name =list[i].e_name;
    		 var sex =list[i].sex;
    		 var addr =list[i].addr;
    		 var tr =
    		`
    			 <tr>
 				<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
 				<td>${e_name}</td>
 				<td>${sex}</td>
 				<td>${addr}</td>
 				</tr>
    		 `;
    		trs +=tr;
    		var obj =document.querySelector("#tb");
    		obj.innerHTML =trs;
         	
    		 
    	 }
	}
	function fn_add(){
		var e_id =document.querySelector("input[name='e_id']").value ;
    	var e_name =document.querySelector("input[name='e_name']").value ;
    	var sex =document.querySelector("input[name='sex']").value ;
    	var addr= document.querySelector("input[name='addr']").value ;
		$.ajax({
	          type: "POST",
	          url: "emp_add.ajax",
	          data: {
	          e_id :e_id,
	          e_name :e_name,
	          sex :sex,
	          addr :addr
	          },
	        
	          success: function (res) {
	        	  var cnt =res.cnt;
	        	  if(cnt =="1"){
	        		  myinit();
	        		  document.querySelector("input[name='e_id']").value="";
	        		  document.querySelector("input[name='e_name']").value="";
	        		  document.querySelector("input[name='sex']").value="";
	        		  document.querySelector("input[name='addr']").value="";
	        	  }else{
	        		  alert("추가하는 도중 문제가 생겼습니다!")
	        	  }
	        	console.log(res);
	        	
	        
	          }
	     });
	}

</script>
</head>
<body onload="myinit()">


   <table border="1px">
   <thead>
      <tr>
         <td>사번</td>
         <td>이름</td>
         <td>성별</td>
         <td>주소</td>
      </tr>
   </thead>
   <tbody id="tb">
      
   </tbody>
   </table>

   <table border="1px">
   <thead>
      <tr>
         <td>사번</td>
         <td>
            <input type="text" name="e_id">
         </td>
      </tr>
      <tr>
         <td>이름</td>
         <td>
            <input type="text" name="e_name">
         </td>
      </tr>
      <tr>
         <td>성별</td>
         <td>
            <input type="text" name="sex">
         </td>
      </tr>
      <tr>
         <td>주소</td>
         <td>
            <input type="text" name="addr">
         </td>
      </tr>
      <tr>
         <td colspan="2">
            <input type="button" value="추가" onclick="fn_add()">
            <input type="button" value="수정" onclick="fn_mod()">
            <input type="button" value="삭제" onclick="fn_del()">
         </td>
      </tr>
   </thead>
   <tbody id="tb">
      
   </tbody>
   </table>

</body>
</html>

      <update, delete>

      @app.route('/emp_mod.ajax',methods=['POST'])
def emp_mod_ajax():
    e_id =request.form['e_id']
    e_name =request.form['e_name']
    sex =request.form['sex']
    addr =request.form['addr']
    de=DaoEmp()
    cnt = -1
    try:
        cnt = de.myupdate(e_name, sex, addr, e_id)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})

@app.route('/emp_del.ajax',methods=['POST'])
def emp_del_ajax():
    e_id =request.form['e_id']
    de=DaoEmp()
    cnt = -1
    try:
        cnt = de.mydelete(e_id)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})
      function fn_mod(){
		var e_id =document.querySelector("input[name='e_id']").value ;
    	var e_name =document.querySelector("input[name='e_name']").value ;
    	var sex =document.querySelector("input[name='sex']").value ;
    	var addr= document.querySelector("input[name='addr']").value ;
		$.ajax({
	          type: "POST",
	          url: "emp_mod.ajax",
	          data: {
	          e_id :e_id,
	          e_name :e_name,
	          sex :sex,
	          addr :addr
	          },
	        
	          success: function (res) {
	        	  var cnt =res.cnt;
	        	  if(cnt =="1"){
	        		  myinit();
	        		  document.querySelector("input[name='e_id']").value="";
	        		  document.querySelector("input[name='e_name']").value="";
	        		  document.querySelector("input[name='sex']").value="";
	        		  document.querySelector("input[name='addr']").value="";
	        	  }else{
	        		  alert("수정하는 도중 문제가 생겼습니다!")
	        	  }
	        	console.log(res);
	        	
	        
	          }
	     });
	}
	function fn_del(){
		var e_id =document.querySelector("input[name='e_id']").value ;
    	
		$.ajax({
	          type: "POST",
	          url: "emp_del.ajax",
	          data: {
	          e_id :e_id
	         
	          },
	        
	          success: function (res) {
	        	  var cnt =res.cnt;
	        	  if(cnt =="1"){
	        		  myinit();
	        		  document.querySelector("input[name='e_id']").value="";
	        		  document.querySelector("input[name='e_name']").value="";
	        		  document.querySelector("input[name='sex']").value="";
	        		  document.querySelector("input[name='addr']").value="";
	        	  }else{
	        		  alert("삭제하는 도중 문제가 생겼습니다!")
	        	  }
	        	console.log(res);
	        	
	        
	          }
	     });
	}

      <  이름 바꾸고 최종본  >

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.6.0.js"></script>
<script type="text/javascript">

	function fn_init(){
		fn_list();
	}

	function fn_list() {
		$.ajax({
			type : "POST",
			url : "emp_list.ajax",
			data : {
				e_id : '1',
				e_name : '1',
				sex : '1',
				addr : '1'
			},
			success : function(res) {
				fn_list_cb(res);

			}
		});

	}
	
	function fn_list_cb(res){
		var list = res;
		var trs = "";
		for(var i=0;i<list.length;i++){
			var e_id = list[i].e_id;
			var e_name = list[i].e_name;
			var sex = list[i].sex;
			var addr = list[i].addr;

			var tr = 
			`
				<tr>
					<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
					<td>${e_name}</td>
					<td>${sex}</td>
					<td>${addr}</td>
				</tr>
			`;
			trs += tr;
			var obj = document.querySelector("#tb");
			
			obj.innerHTML = trs;
		}
	}	
	
	
	function fn_one(e_id){
		$.ajax({
			type : "POST",
			url : "emp_one.ajax",
			data : {
				e_id : e_id
			},
			success : function(res) {
				var emp = res;
				document.querySelector("input[name='e_id']").value		= emp.e_id;
				document.querySelector("input[name='e_name']").value	= emp.e_name;
				document.querySelector("input[name='sex']").value		= emp.sex;
				document.querySelector("input[name='addr']").value		= emp.addr;

			}
		});
	}
	

	
	function fn_add(){
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var sex = document.querySelector("input[name='sex']").value;
		var addr = document.querySelector("input[name='addr']").value;
		$.ajax({
			type : "POST",
			url : "emp_add.ajax",
			data : {
				e_id : e_id,
				e_name : e_name,
				sex : sex,
				addr : addr,
			},
			success : function(res) {
				var cnt = res.cnt;
				if(cnt == "1"){
					 fn_list();
					 document.querySelector("input[name='e_id']").value = "";
					 document.querySelector("input[name='e_name']").value = "";
					 document.querySelector("input[name='sex']").value = "";
					 document.querySelector("input[name='addr']").value = "";
				} else {
					alert("추가도중 문제가 생겼습니다.");
				}


			}
		});
	}
	
	function fn_mod(){
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var sex = document.querySelector("input[name='sex']").value;
		var addr = document.querySelector("input[name='addr']").value;
		$.ajax({
			type : "POST",
			url : "emp_mod.ajax",
			data : {
				e_id : e_id,
				e_name : e_name,
				sex : sex,
				addr : addr,
			},
			success : function(res) {
				var cnt = res.cnt;
				if(cnt == "1"){
					 fn_list();
					 document.querySelector("input[name='e_id']").value = "";
					 document.querySelector("input[name='e_name']").value = "";
					 document.querySelector("input[name='sex']").value = "";
					 document.querySelector("input[name='addr']").value = "";
				} else {
					alert("수정도중 문제가 생겼습니다.");
				}


			}
		});
	}
	
	function fn_del(){
		var e_id = document.querySelector("input[name='e_id']").value;
		$.ajax({
			type : "POST",
			url : "emp_del.ajax",
			data : {
				e_id : e_id
			},
			success : function(res) {
				var cnt = res.cnt;
				if(cnt == "1"){
					 fn_list();
					 document.querySelector("input[name='e_id']").value = "";
					 document.querySelector("input[name='e_name']").value = "";
					 document.querySelector("input[name='sex']").value = "";
					 document.querySelector("input[name='addr']").value = "";
				} else {
					alert("수정도중 문제가 생겼습니다.");
				}


			}
		});
	}
	
	
	
</script>
</head>
<body onload="fn_init()" >
	<table border="1px">
		<thead>
			<tr>
				<td>사번</td>
				<td>이름</td>
				<td>성별</td>
				<td>주소</td>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>		
		</tbody>

	</table>
	<table border="1px">
		<tr>
			<td>사번</td>
			<td>
				<input type="text" name="e_id" />
			</td>
		</tr>	
		<tr>
			<td>이름</td>
			<td>
				<input type="text" name="e_name" />
			</td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="text" name="sex" />
			</td>
		</tr>
		<tr>
			<td>주소</td>
			<td>
				<input type="text" name="addr" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="추가" onclick="fn_add()" />
				<input type="button" value="수정" onclick="fn_mod()" />
				<input type="button" value="삭제" onclick="fn_del()" />
				
			</td>
		</tr>
		
	</table>

</body>
</html>

      <axios>

      • 브라우저, Node.js를 위한 Promise 기반 API를 활용하는 HTTP 비동기 통신 라이브러리
      • 백엔드와 프론트엔드랑 통신을 쉽게하기 위해 ajax와 같이 사용된다.
      • 프레임워크에서 ajax를 구현할 때 axios를 쓰는 편이라고 보면 된다.
      function fn_init(){
		fn_axios();
	}
	
	function fn_axios(){

		axios.post('/emp.ajax')
		
		.then(function(response) {
		  console.log(response);
		  
		})
		.catch(function(error){
			console.log(error);
		})
		.finally(function(){
			
		});
	}

      <select, insert>

      -myflask_emp

      from flask import Flask
from flask.globals import request
from flask.templating import render_template

from flask.json import jsonify
from day12.dao_emp import DaoEmp

app = Flask(__name__,static_url_path='')
de = DaoEmp()

@app.route('/')
@app.route('/emp')
def emp():
    return render_template('emp.html')

@app.route('/emp.ajax',methods=['POST'])
def emp_ajax():
    data = request.get_json()
    print("data",data['e_id'])
    return jsonify({'msg': '저장 완료!'})

@app.route('/emp_list.ajax',methods=['POST'])
def emp_list_ajax():
    de = DaoEmp()
    list = de.myselects()
    return jsonify(list)

#insert 작업
@app.route('/emp_add.ajax',methods=['POST'])
def emp_add_ajax():
    data = request.get_json()
    e_id    =data['e_id']
    e_name  =data['e_name']
    sex    =data['sex']
    addr   =data['addr']
    de = DaoEmp()
    cnt = -1
    try:
        cnt = de.myinsert(e_id, e_name, sex, addr)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})



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

      -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_init(){
		fn_list();
	}

	function fn_list() {
		var param ={
			e_id: '7',
			e_name: '7'
	    }
		axios.post('/emp_list.ajax',param)
		.then(function (res) {
			fn_list_cb(res);
		})

	}
	
	function fn_list_cb(res){
		console.log(res);
		var list = res.data;
		var trs = "";
		for(var i=0;i<list.length;i++){
			var e_id = list[i].e_id;
			var e_name = list[i].e_name;
			var sex = list[i].sex;
			var addr = list[i].addr;

			var tr = 
			`
				<tr>
					<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
					<td>${e_name}</td>
					<td>${sex}</td>
					<td>${addr}</td>
				</tr>
			`;
			trs += tr;
			var obj = document.querySelector("#tb");
			
			obj.innerHTML = trs;
		}
	}
	
	function fn_add(){
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var sex = document.querySelector("input[name='sex']").value;
		var addr = document.querySelector("input[name='addr']").value;
		
		var param ={
			e_id : e_id,
			e_name : e_name,
			sex : sex,
			addr : addr
	    }
		axios.post('/emp_add.ajax',param)
		.then(function (res) {
			console.log("emp_add.ajax",res);
			var cnt = res.data.cnt;
			if(cnt == "1"){
				 fn_list();
				 document.querySelector("input[name='e_id']").value = "";
				 document.querySelector("input[name='e_name']").value = "";
				 document.querySelector("input[name='sex']").value = "";
				 document.querySelector("input[name='addr']").value = "";
			} else {
				alert("추가도중 문제가 생겼습니다.");
			}
		})
		

	}
	
	
</script>
</head>
<body onload="fn_init()" >
	<table border="1px">
		<thead>
			<tr>
				<td>사번</td>
				<td>이름</td>
				<td>성별</td>
				<td>주소</td>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>		
		</tbody>

	</table>
	<table border="1px">
		<tr>
			<td>사번</td>
			<td>
				<input type="text" name="e_id" />
			</td>
		</tr>	
		<tr>
			<td>이름</td>
			<td>
				<input type="text" name="e_name" />
			</td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="text" name="sex" />
			</td>
		</tr>
		<tr>
			<td>주소</td>
			<td>
				<input type="text" name="addr" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="추가" onclick="fn_add()" />
				<input type="button" value="수정" onclick="fn_mod()" />
				<input type="button" value="삭제" onclick="fn_del()" />
				
			</td>
		</tr>
		
	</table>

</body>
</html>

      <update, delete>

      <!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_init(){
		fn_list();
	}

	function fn_list() {
		var param ={
			e_id: '7',
			e_name: '7'
	    }
		axios.post('/emp_list.ajax',param)
		.then(function (res) {
			fn_list_cb(res);
		})

	}
	function fn_one(e_id){
		var param={
			e_id: e_id
		}
		axios.post('/emp_one.ajax',param)
		.then(function (res) {
			var emp = res;
			document.querySelector("input[name='e_id']").value		= emp.data.e_id;
			document.querySelector("input[name='e_name']").value	= emp.data.e_name;
			document.querySelector("input[name='sex']").value		= emp.data.sex;
			document.querySelector("input[name='addr']").value		= emp.data.addr;

			
		})
	}
	
	function fn_list_cb(res){
		console.log(res);
		var list = res.data;
		var trs = "";
		for(var i=0;i<list.length;i++){
			var e_id = list[i].e_id;
			var e_name = list[i].e_name;
			var sex = list[i].sex;
			var addr = list[i].addr;

			var tr = 
			`
				<tr>
					<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
					<td>${e_name}</td>
					<td>${sex}</td>
					<td>${addr}</td>
				</tr>
			`;
			trs += tr;
			var obj = document.querySelector("#tb");
			
			obj.innerHTML = trs;
		}
	}
	
	function fn_add(){
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var sex = document.querySelector("input[name='sex']").value;
		var addr = document.querySelector("input[name='addr']").value;
		
		var param ={
			e_id : e_id,
			e_name : e_name,
			sex : sex,
			addr : addr
	    }
		axios.post('/emp_add.ajax',param)
		.then(function (res) {
			console.log("emp_add.ajax",res);
			var cnt = res.data.cnt;
			if(cnt == "1"){
				 fn_list();
				 document.querySelector("input[name='e_id']").value = "";
				 document.querySelector("input[name='e_name']").value = "";
				 document.querySelector("input[name='sex']").value = "";
				 document.querySelector("input[name='addr']").value = "";
			} else {
				alert("추가도중 문제가 생겼습니다.");
			}
		})
		

	}
	
	function fn_mod(){
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var sex = document.querySelector("input[name='sex']").value;
		var addr = document.querySelector("input[name='addr']").value;
		
		var param ={
			e_id : e_id,
			e_name : e_name,
			sex : sex,
			addr : addr
	    }
		axios.post('/emp_mod.ajax',param)
		.then(function (res) {
			var cnt = res.data.cnt;
			if(cnt == "1"){
				 fn_list();
				 document.querySelector("input[name='e_id']").value = "";
				 document.querySelector("input[name='e_name']").value = "";
				 document.querySelector("input[name='sex']").value = "";
				 document.querySelector("input[name='addr']").value = "";
			} else {
				alert("수정도중 문제가 생겼습니다.");
			}
		})
		

	}
	function fn_del(){
		var e_id = document.querySelector("input[name='e_id']").value;
		
		
		var param ={
			e_id : e_id		
	    }
		axios.post('/emp_del.ajax',param)
		.then(function (res) {
			var cnt = res.data.cnt;
			if(cnt == "1"){
				 fn_list();
				 document.querySelector("input[name='e_id']").value = "";
				 document.querySelector("input[name='e_name']").value = "";
				 document.querySelector("input[name='sex']").value = "";
				 document.querySelector("input[name='addr']").value = "";
			} else {
				alert("삭제도중 문제가 생겼습니다.");
			}
		})
		

	}
	
	
</script>
</head>
<body onload="fn_init()" >
	<table border="1px">
		<thead>
			<tr>
				<td>사번</td>
				<td>이름</td>
				<td>성별</td>
				<td>주소</td>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>		
		</tbody>

	</table>
	<table border="1px">
		<tr>
			<td>사번</td>
			<td>
				<input type="text" name="e_id" />
			</td>
		</tr>	
		<tr>
			<td>이름</td>
			<td>
				<input type="text" name="e_name" />
			</td>
		</tr>
		<tr>
			<td>성별</td>
			<td>
				<input type="text" name="sex" />
			</td>
		</tr>
		<tr>
			<td>주소</td>
			<td>
				<input type="text" name="addr" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="button" value="추가" onclick="fn_add()" />
				<input type="button" value="수정" onclick="fn_mod()" />
				<input type="button" value="삭제" onclick="fn_del()" />
				
			</td>
		</tr>
		
	</table>

</body>
</html>
      from flask import Flask
from flask.globals import request
from flask.templating import render_template

from flask.json import jsonify
from day12.dao_emp import DaoEmp

app = Flask(__name__,static_url_path='')
de = DaoEmp()

@app.route('/')
@app.route('/emp')
def emp():
    return render_template('emp.html')

@app.route('/emp.ajax',methods=['POST'])
def emp_ajax():
    data = request.get_json()
    print("data",data['e_id'])
    return jsonify({'msg': '저장 완료!'})

@app.route('/emp_list.ajax',methods=['POST'])
def emp_list_ajax():
    de = DaoEmp()
    list = de.myselects()
    return jsonify(list)

@app.route('/emp_one.ajax',methods=['POST'])
def emp_one_ajax():
    data = request.get_json()
    e_id    =data['e_id']
    de = DaoEmp()
    list = de.myselect(e_id)
    return jsonify(list)

#insert 작업
@app.route('/emp_add.ajax',methods=['POST'])
def emp_add_ajax():
    data = request.get_json()
    e_id    =data['e_id']
    e_name  =data['e_name']
    sex    =data['sex']
    addr   =data['addr']
    de = DaoEmp()
    cnt = -1
    try:
        cnt = de.myinsert(e_id, e_name, sex, addr)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})
#update 작업
@app.route('/emp_mod.ajax',methods=['POST'])
def emp_mod_ajax():
    data = request.get_json()
    e_id    =data['e_id']
    e_name  =data['e_name']
    sex    =data['sex']
    addr   =data['addr']
    de = DaoEmp()
    cnt = -1
    try:
        cnt = de.myupdate(e_name, sex, addr, e_id)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})
#delete 작업 
@app.route('/emp_del.ajax',methods=['POST'])
def emp_del_ajax():
    data = request.get_json()
    e_id    =data['e_id']
   
    de = DaoEmp()
    cnt = -1
    try:
        cnt = de.mydelete(e_id)
    except:
        print("dao : error")
    
    return jsonify({'cnt':cnt})

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

      전체 결과

       

      #axios예제 #axios #ajax

      728x90

      '파이썬' 카테고리의 다른 글

      Crawling 2 , fast  (8) 2022.06.16
      Python Flask CORS ,Crawling  (0) 2022.06.14
      pymysql -22.06.08-22.06.09  (0) 2022.06.09
      오목게임 만들기-22.06.03~22.06.07  (0) 2022.06.07
      파이썬 -pyqt  (0) 2022.06.03

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바