Dept ajax sample

search.html

<table > <thead> <th>부서번호</th> <th>부서이름</th> <th>지역</th> </thead> <tbody id="tbody"></tbody> </table>

$("#list").click(function() { $.ajax({ url : "DeptListAjax?rnd=" + Math.floor(Math.random() * 9999999), type : "get", dataType : "json", success : function(data) { var newTbody; $.each(data.deptList,function(index,dept){ //data.deptList[index].deptno newTbody += "<tr><td>"+dept.deptno+"</td>"; newTbody += "<td>"+dept.dname+"</td>"; newTbody += "<td>"+dept.loc+"</td></tr>"; }); $("#tbody").html(newTbody); }, error : function(jqXHR, textStatus, errorThrown){              alert("에러발생 "+ textStauus+":"+errorThrown); } }); });

$("#serch").click(function() { $.ajax({     url : "deptSearch?rnd=" + Math.floor(Math.random() * 9999999),     type : "get",     data : {deptNo : $("#deptNo").val()},     dataType : "json",     contentType : "application/json",     success : function(data) { $("#tbody").html("<td>"+data.deptno+"</td>"); $("#tbody").append("<td>"+data.dname+"</td>"); $("#tbody").append("<td>"+data.loc+"</td>");    },    error : function(jqXHR, textStatus, errorThrown){              alert("에러발생 "+ textStauus+":"+errorThrown); } }); });

DeptListAjax 

response.setContentType("appliction/json; charset=utf-8"); PrintWriter out = response.getWriter(); DeptDAO dao = new DeptDAO(); ArrayList<DeptVO> list = dao.getDeptList(); JSONObject jobj = new JSONObject(); jobj.put("deptList", list); out.print(jobj.toString()); System.out.print(jobj.toString()); out.close();

값을 넘길때 data : {

deptNo : $("#deptNo").val(),

dname : $("#dname").val(),

loc : $("#loc").val()

} 

이렇게 하나씩 꺼내서 넘겨줘도 되고, 

폼의 값을 모두 넘길거라면 아래처럼 사용해도 된다.  

data :  $("#form").serialize()  \

$("#dpetinput").click(function() { $.ajax({         url : "deptInput?rnd=" + Math.floor(Math.random() * 9999999), type : "get", data :  $("#form").serialize(),  //폼에 있는 값을 모두 넘길때..   /* data : { deptNo : $("#deptNo").val(), dname : $("#dname").val(), loc : $("#loc").val() }, */ contentType : "application/json", success : function(data) { $("#output").html("ajax 입력성공!!"); },     error : function(jqXHR, textStatus, errorThrown) {    alert("에러발생 "+ textStauus+":"+errorThrown);     } }); });