본문 바로가기
JSON & AJAX

JSON & AJAX 1일차

비오는시골길 2013. 11. 7. 14:11
반응형

# API

http://www.dhtmlx.com
http://json-lib.sourceforge.net/apidocs/jdk15/index.html
http://jquery.com/


[ex]
js1.jsp
=======
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
</head>
<body>
 <script>
 var str='{"addr":"c","id":"a","pw":"b","rownum":"","state":"normal","tel":"d"}';
 var member=$.parseJSON(str);
 document.write(member.addr+"<br>");
 document.write(member.id+"<br>");
 document.write(member.pw+"<br>");
 document.write(member.tel+"<br>");
 </script>
</body>
</html>

 

[ex]
js2.jsp
=======
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
</head>
<body>
 <script>
 var str='{"list":[{"addr":"a","id":"a","pw":"a","tel":"a"},';
 str+='{"addr":"b","id":"b","pw":"b","tel":"b"}]}';
 var obj=$.parseJSON(str);
 document.write(obj.list+"<br>");
 document.write("배열의길이:"+obj.list.length+"<br>");
 document.write(obj.list[0].id+"<br>");
 document.write(obj.list[0].pw+"<br>");
 document.write(obj.list[0].addr+"<br>");
 document.write(obj.list[0].tel+"<hr>");
 document.write(obj.list[1].id+"<br>");
 document.write(obj.list[1].pw+"<br>");
 document.write(obj.list[1].addr+"<br>");
 document.write(obj.list[1].tel+"<br>");
 </script>
</body>
</html>

js3.jsp
=======
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
</head>
<body>
 <script>
 var str='{"list":[{"addr":"a","id":"a","pw":"a","rownum":"","state":"normal","tel":"a"},';
 str+='{"addr":"b","id":"b","pw":"b","rownum":"","state":"normal","tel":"b"}]}';
 
 document.write("<table>");
 $.each($.parseJSON(str).list,function(index,member){

  //$.eash(object, function(index, item) {} );
  document.write("<tr>");
  document.write("<td>"+member.id+"</td>");
  document.write("<td>"+member.pw+"</td>");
  document.write("<td>"+member.addr+"</td>");
  document.write("<td>"+member.tel+"</td>");
  document.write("</tr>");
 });
 document.write("</table>");
 </script>
</body>
</html>


# ajax & json

[ex]
json1.jsp
=========
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="net.sf.json.JSONObject"%>
<%@ page import="com.seoulit.member.model.MemberDAO" %>
<%@ page import="com.seoulit.member.model.Member" %>
<%
 ArrayList<Member> list=MemberDAO.getInstance().selectMemberList();

//DB을 연동하여 ArrayList에 selectMemberList값을 넣는다.
 HashMap<String,Object> map=new HashMap<String,Object>();
 map.put("list",list);
 JSONObject jsonObject=JSONObject.fromObject(map);
 out.println(jsonObject); 
%>

실행결과
========
{"list":[{"addr":"a","id":"a","pw":"a","rownum":"","state":"normal","tel":"a"},

{"addr":"b","id":"b","pw":"b","rownum":"","state":"normal","tel":"b"},

{"addr":"addr15","id":"id15","pw":"pw15","rownum":"","state":"normal","tel":"tel15"},

{"addr":"addr7","id":"id7","pw":"pw7","rownum":"","state":"normal","tel":"tel7"},

{"addr":"c","id":"c","pw":"c","rownum":"","state":"normal","tel":"c"},

{"addr":"d","id":"d","pw":"d","rownum":"","state":"normal","tel":"d"}]}

 

[ex] 회원리스트버튼을 클릭했을때 memberListContainer에 회원리스트를 출력하려면?

ajax1.jsp
=========
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.seoulit.member.model.MemberDAO" %>
<%@ page import="com.seoulit.member.model.Member" %>
<%@ page import="java.util.ArrayList" %>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 td { border : 1px solid navy; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function(){
  $('div').css({
   backgroundColor:'#D5D5D5',
   position:'absolute', width:'200px',height:'200px',top:'50px'
  });
  $('#menuContainer').css({left:'50px',backgroundColor:''});
  $('#memberListContainer').css({left:'200px'});
  $('#memberContainer').css({left:'450px'});
  
  $('#listButton').click(listFunction);
 });
 function listFunction(){
  $.ajax({
   url:'json1.jsp',
   success:function(data){
    alert(data);
   },
   error:function(a,b,c){ alert(a+","+b+","+c); }
  });
 }
</script>
</head>
<body>
 <div id="menuContainer">
 <input type="button" value="회원리스트" id="listButton"><br>
 </div>
 <div id="memberListContainer">
 </div>
 <div id="memberContainer">
 </div> 
</body>
</html>
[an]
ajax1-1.jsp
===========
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.seoulit.member.model.MemberDAO" %>
<%@ page import="com.seoulit.member.model.Member" %>
<%@ page import="java.util.ArrayList" %>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 td { border : 1px solid navy; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function(){
  $('div').css({
   backgroundColor:'#D5D5D5',
   position:'absolute', width:'200px',height:'200px',top:'50px'
  });
  $('#menuContainer').css({left:'50px',backgroundColor:''});
  $('#memberListContainer').css({left:'200px'});
  $('#memberContainer').css({left:'450px'});
  $('#listButton').click(listFunction);
 });
 function listFunction(){
  $.ajax({
   url:'json1.jsp',
   success:function(data){
    var colName=['id','pw','addr','tel'];
    var str="<table>";
    $.each($.parseJSON(data).list,function(index,member){
     str+="<tr>";
     $.each(colName,function(index,name){
      str+="<td>"+member[name]+"</td>";
     }); 
     str+="</tr>";
    });
    str+="</table>";
    $('#memberListContainer').css({overflow:'scroll'}).html(str);
   },
   error:function(a,b,c){ alert(a+","+b+","+c); }
  });
 }
</script>
</head>
<body>
 <div id="menuContainer">
 <input type="button" value="회원리스트" id="listButton"><br>
 </div>
 <div id="memberListContainer">
 </div>
 <div id="memberContainer">
 </div> 
</body>
</html>


[ex]
json2.jsp
=========
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="net.sf.json.JSONObject"%>
<%@ page import="com.seoulit.member.model.MemberDAO" %>
<%@ page import="com.seoulit.member.model.Member" %>
<%
 String id=request.getParameter("id");
 Member member=MemberDAO.getInstance().selectMember(id);
 HashMap<String,Object> map=new HashMap<String,Object>();
 map.put("member",member);
 JSONObject jsonObject=JSONObject.fromObject(map);
 out.println(jsonObject); 
%>

ajax1-2.jsp
===========
<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="com.seoulit.member.model.MemberDAO" %>
<%@ page import="com.seoulit.member.model.Member" %>
<%@ page import="java.util.ArrayList" %>     
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
 td { border : 1px solid navy; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function(){
  $('div').css({
   backgroundColor:'#D5D5D5',
   position:'absolute', width:'200px',height:'200px',top:'50px'
  });
  $('#menuContainer').css({left:'50px',backgroundColor:''});
  $('#memberListContainer').css({left:'200px'});
  $('#memberContainer').css({left:'450px'});
  $('#listButton').click(listFunction);
 });
 function listFunction(){
  $.ajax({
   url:'json1.jsp',
   success:function(data){
    var colName=['id','pw','addr','tel'];
    var str="<table>";
    $.each($.parseJSON(data).list,function(index,member){
     str+="<tr onclick=trClickFunc(this)>";
     $.each(colName,function(index,name){
      str+="<td>"+member[name]+"</td>";
     }); 
     str+="</tr>";
    });
    str+="</table>";
    $('#memberListContainer').css({overflow:'scroll'}).html(str);
   },
   error:function(a,b,c){ alert(a+","+b+","+c); }
  });
 }
 function trClickFunc(trObj){
  var selectedId=$(trObj.childNodes[0]).text();
  //alert($(trObj.childNodes[0]).text());
   
  $.ajax({
   url:'json2.jsp',
   data:{id:selectedId},
   success:function(data){
    alert(data);
   },
   error:function(a,b,c){ alert(a+","+b+","+c); }
  });
 }
</script>
</head>
<body>
 <div id="menuContainer">
 <input type="button" value="회원리스트" id="listButton"><br>
 </div>
 <div id="memberListContainer">
 </div>
 <div id="memberContainer">
 </div> 
</body>
</html>



반응형

티스토리툴바