22.09.08. 오전 python 정리를 한 걸까...?
웹표준 = 브라우저에 관계없이 작동할 수 있도록 하는 웹에서 표준적으로 사용되는 기술이나 규칙
웹접근성 = 장애인 고령자 등 모든 사람이 사용할 수 있도록 하는 것.
모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것
웹접근성(Web Accessibility) | 웹접근성과 웹표준
웹접근성(Web Accessibility) 웹접근성의 개요 오늘 하루 많이 걸었나요? 건물 입구에 있는 5~6개의 계단도 높아 보여서 자연스럽게 옆에 있는 경사로로 발걸음을 옮기게 됩니다. 점심 식사 후 잠깐의
seulbinim.github.io
어제까지 JSP로 작성한 코드들을 JQUERY로 바꾸는 작업들을 했었다.
document.querySelector(All)로 된 코드를 $('ID/CLASS') 바꾸는 정도?
정적 자원을 사용하는 경우 static 폴더를 생성하고 그 밑에 사용할 파일들을 넣는 식으로 사용한다.(아마두?)
...? 오늘 뭐 했더라....? 또....?
비동기 방식으로 버튼을 누르면 사원 정보가 table로 출력되도록 하기...?
1. db에서 정보 가져오는 메서드(daoemp.py) - class DaoEmp의 my list()메소드.
class DaoEmp:
def __init__(self):
self.con = pymysql.connect(host='127.0.0.1', user='root', password='python', db='python', charset='utf8',port=3305)
self.cur = self.con.cursor(pymysql.cursors.DictCursor)
def mylist(self):
sql = "select e_id, e_name, sex, addr from emp order by e_id"
self.cur.execute(sql)
mylist=self.cur.fetchall()
return mylist
def __del__(self):
self.cur.close()
self.con.close()2. settings.py의 INSTALLED_APPS에 해당 어플리케이션(?) 등록
INSTALLED_APPS = [
'SPA_EMP'
]3. urls.py에 첫 페이지와 ajax로 데이터 가져올 url 등록
urlpatterns = [
path('emp', views.emp),
path('emp_list.ajax', views.emp_list_ajax),
]4. views.py에 처리할 코드 작성
def emp(request):
return render(request, "emp.html")
def emp_list_ajax(request):
de = DaoEmp()
list = de.mylist()
context = {
'list':list,
}
return JsonResponse(context)첫 번째 메소드는 첫 화면을 띄우는 메소드, 두 번째 메소드는 첫 화면에 비동기로 list를 건네는 메소드.
5. html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><script src="static/js/jquery-3.6.1.js"></script>
<script type="text/javascript">
function myclick() {
$.ajax({
type: "GET", //요청 메소드 방식
url:"emp_list.ajax",
dataType:"json", //서버가 요청 URL을 통해서 응답하는 내용의 타입
success : function(data){
var list = data.list;
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 sex=list[i].sex;
var addr=list[i].addr;
txt+=`
<tr>
<td>${e_id}</td>
<td>${e_name}</td>
<td>${sex}</td>
<td>${addr}</td>
</tr>
`;
}
$("#mytbody").html(txt);
},
});
}
</script>
</head>
<body>
<table>
<thead>
<tr>
<td>사번</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody id="mytbody">
</tbody>
</table>
<a href="javascript:myclick()">click</a>
</body>
</html>
결과물
