본문 바로가기
Python

[DJANGO] Ajax 통신을 이용한 CRUD

hyokee 2023. 7. 10. 17:29

emp.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
function fn_ajax(){
	var data = {'e_id' : 1};
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/ajax',
		data:JSON.stringify(data),
		success:function(e){
			console.log(e.flag)
			console.log(e.flag2)
			console.log(e.data)
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}
function fn_emp_list(){
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/emp_list',
		success:function(e){
			console.log(e);
			console.log(e.list);
			var list = e.list;
			let code ="";
			
/* 			var html = '';
			for(var i = 0; i<list.length; i++){
				var vo = list[i];
				var e_id = vo.E_ID;
				var e_name = vo.E_NAME;
				var gen = vo.GEN;
				var addr = vo.ADDR;
				
				html += `
						<tr>
							<td>${e_id}</td>
							<td>${e_name}</td>
							<td>${gen}</td>
							<td>${addr}</td>
						</tr>
						`;
			}
*/
			
			$.each(e.list,function(i,v){
				code += "<tr>"
				code += "<td><a href='javascript:fn_ajax_one("+v.E_ID+")'>"+ v.E_ID + "</a></td>"
				code += "<td>"+ v.E_NAME + "</td>"
				code += "<td>"+ v.GEN + "</td>"
				code += "<td>"+ v.ADDR + "</td>"
				code += "</tr>"
			})
			$('#my_tbody').html(code);
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}
function fn_ajax_one(e_id){
	var data2 = {'e_id' : e_id}
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/emp_one',
		data : JSON.stringify(data2),
		success:function(e){
			var emp = e.vo
			var e_id = emp.E_ID;
			var e_name = emp.E_NAME;
			var gen = emp.GEN;
			var addr = emp.ADDR;
			
			$('#e_id').val(e_id);
			$('#e_name').val(e_name);
			$('#gen').val(gen);
			$('#addr').val(addr);
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}
function fn_emp_add(){
	var e_id = $('#e_id').val();
	var e_name = $('#e_name').val();
	var gen = $('#gen').val();
	var addr = $('#addr').val();
	var data = {
				'e_id' : e_id,
				'e_name' : e_name,
				'gen' : gen,
				'addr' : addr,	
				}
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/emp_add',
		data : JSON.stringify(data),
		success:function(e){
			if(e.cnt!=0){
				alert("추가성공");
				fn_emp_list()
			} else{
				alert("추가실패");
				
			}
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}
function fn_emp_del(){
	var e_id = $('#e_id').val();
	var data = { 'e_id' : e_id }
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/emp_del',
		data : JSON.stringify(data),
		success:function(e){
			if(e.cnt!=0){
				alert("삭제성공");
				fn_emp_list()
			} else{
				alert("삭제실패");
				
			}
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}

function fn_emp_mod(){
	var e_id = $('#e_id').val();
	var e_name = $('#e_name').val();
	var gen = $('#gen').val();
	var addr = $('#addr').val();
	var data = {
			'e_id' : e_id,
			'e_name' : e_name,
			'gen' : gen,
			'addr' : addr,	
			}
	$.ajax({
		type:'post',
		url:'http://127.0.0.1:8000/emp_mod',
		data : JSON.stringify(data),
		success:function(e){
			if(e.cnt!=0){
				alert("수정성공");
				fn_emp_list()
			} else{
				alert("수정실패");
			}
		},
		error : function(xhr){
			 alert(xhr.status);
		},
		dataType : 'json'
	});
}
</script>
</head>
<body>
EMP<br/>
<a href="javascript:fn_ajax()">ajax</a>
<a href="javascript:fn_emp_list()">emp_list</a>
<br/>
<br/>
<table border="1">
	<thead>
		<tr>
			<td>사번</td>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>	
	</thead>
	<tbody id="my_tbody">
		<tr>
			<td colspan="4">데이터가 없습니다.</td>
		</tr>
	</tbody>
</table>
<br/>

<table border="1">
	<tr>
		<th>사번</th>
		<td>
			<input type="text" id="e_id"/>
		</td>
	</tr>
	<tr>
		<th>이름</th>
		<td>
			<input type="text" id="e_name"/>
		</td>
	</tr>
	<tr>
		<th>성별</th>
		<td>
			<input type="text" id="gen"/>
		</td>
	</tr>
	<tr>
		<th>주소</th>
		<td>
			<input type="text" id="addr"/>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="추가" onclick= "fn_emp_add()"/>
			<input type="button" value="수정" onclick= "fn_emp_mod()"/>
			<input type="button" value="삭제" onclick= "fn_emp_del()"/>
		</td>
	</tr>
</table>
</body>
</html>

 

urls.py

from django.contrib import admin
from django.urls import path
from HELLO_AJAX import views
urlpatterns = [
    path('admin/', admin.site.urls), 
    path('', views.emp),
    path('emp', views.emp),
    path('ajax', views.ajax),
    path('emp_list', views.emp_list),
    path('emp_one', views.emp_one),
    path('emp_add', views.emp_add),
    path('emp_del', views.emp_del),
    path('emp_mod', views.emp_mod),
]

 

 

views.py

from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.http.response import JsonResponse
import json
from HELLO_AJAX.dao_emp import DaoEmp

def emp(request):
    return render(request,"emp.html")

@csrf_exempt
def ajax(request):
    data = json.loads(request.body)
    print(data['e_id'])
    print(data.get('e_id'))
    flag = "ok"
    a = {'flag' : flag,
         'flag2' : "ook",
         'data' : data
        }
    return JsonResponse(a)


@csrf_exempt
def emp_list(request):
    de = DaoEmp()
    emps = de.selectList()
    
    #return JsonResponse(list(emps), safe=False)
    return JsonResponse({'list' : emps})

@csrf_exempt
def emp_one(request):
    de = DaoEmp()
    param = json.loads(request.body)
    vo = de.selectOne(param['e_id'])
    return JsonResponse({'vo' : vo})

@csrf_exempt
def emp_add(request):
    de = DaoEmp()
    data = json.loads(request.body)
    e_id = data['e_id']
    e_name  = data['e_name']
    gen = data['gen']
    addr = data['addr']
    cnt = de.insert(e_id, e_name, gen, addr)
    return JsonResponse({'cnt' : cnt})

@csrf_exempt
def emp_del(request):
    de = DaoEmp()
    data = json.loads(request.body)
    e_id = data['e_id']
    cnt = de.delete(e_id)
    return JsonResponse({'cnt' : cnt})

@csrf_exempt
def emp_mod(request):
    de = DaoEmp()
    data = json.loads(request.body)
    e_id = data['e_id']
    e_name  = data['e_name']
    gen = data['gen']
    addr = data['addr']
    cnt = de.update(e_id, e_name, gen, addr)
    return JsonResponse({'cnt' : cnt })

 

dao_emp.py

 

import pymysql
class DaoEmp:
    def __init__(self):
        self.conn = pymysql.connect(host='127.0.0.1', user='root', password='python',
                           db='python',port=3304, charset='utf8')
        self.curs = self.conn.cursor(pymysql.cursors.DictCursor)
        
    def selectList(self):
        sql = """
        select 
        E_ID, E_NAME, GEN, ADDR 
        from emp
        ORDER BY CAST(E_ID AS INTEGER)
        """
        self.curs.execute(sql)
        list = self.curs.fetchall()
        return list

    def selectOne(self,e_id):
        sql = f"""
        select
            E_ID, E_NAME, GEN, ADDR
        FROM EMP
        WHERE
            E_ID = '{e_id}'
        """
        self.curs.execute(sql)
        emp = self.curs.fetchall()
        return emp[0]
    
    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.curs.execute(sql)
        self.conn.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.curs.execute(sql)
        self.conn.commit()
        return cnt
    
    def delete(self,e_id):
        sql = f"""
        delete from emp
        where
            e_id = '{e_id}'
        """
        cnt = self.curs.execute(sql)
        self.conn.commit()
        return cnt
    
    def __del__(self):
        self.curs.close()
        self.conn.close()
        
        
    def __str__(self):
        return "소리능력 " + str(self.flag_sound)
    
if __name__ == '__main__':
    de = DaoEmp()
    list = de.selectList()
    print(list)

 

'Python' 카테고리의 다른 글

[DJANGO] MARIA DB 연결(4) - INSERT(ADD)  (0) 2023.07.06
[DJANGO] MARIA DB 연결(3) - DELETE  (0) 2023.07.06
[DJANGO] MARIA DB 연결(2) - UPDATE(MODIFY)  (0) 2023.07.06
[DJANGO] MARIA DB 연결(1) - SELECT  (0) 2023.07.06
[MariaDB] MariaDB, HeidiSQL 이용해 python과 연결하기  (0) 2023.07.03

'Python' Related Articles

티스토리툴바