Ajax 예제
1. 버튼 클릭 시 특정 값을 서버에 전송하기
- jsp 파일
<li>
버튼 클릭 시 특정 값을 서버에 전송하기 <br>
이름 : <input type="text" name="myName" id="myName" />
<button id="nameBtn">이름 보내기</button>
<script>
$('#nameBtn').click(function(){
// jQuery 에서는 총 3개의 Ajax 함수를 제공한다
// $.get("요청할 주소 URL", {전달할 키 : 값}, 리턴할 함수);
// $.post("요청할 주소 URL", {전달할 키 : 값}, 리턴할 함수);
// $.ajax(); <-- 공통함수
$.ajax({
url : "test1.do", // 전송할 주소 URL
data : { name : $('#myName').val() }, // 서버에 전달할 값
type : "get",
success : function(data) {
console.log("이름 전송 성공");
}, error : function(requeset, status, error) {
console.log("request : " + request);
console.log("status : " + status);
console.log("error : " + error);
}, complete : function(){
console.log("complete는 무조건 실행");
}
});
});
</script>
</li>
- java 파일
/**
* Servlet implementation class TestServlet1
*/
@WebServlet("/test1.do")
public class TestServlet1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet1() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
System.out.println("사용자 이름 확인 : " + name);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2. 버튼 클릭시 서버에서 보낸 값을 사용자가 확인하기
- jsp
<li>
버튼 클릭했을 때 서버에서 보낸 값을 사용자가 확인하기 <br />
<button id="getServerTextBtn">서버가 보낸 값 확인</button>
<p id="p1" style="width : 300px; height : 100px; border : 3px solid red"></p>
<script>
$('#getServerTextBtn').click(function(){
$.ajax({
url : "test2.do",
//url : "test15.do", // 에러발생 여부 확인
type : "get",
success : function(data){
$('#p1').text(data);
}, error : function() {
$('#p1').text("에러발생!");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet2
*/
@WebServlet("/test2.do")
public class TestServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet2() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("UTF-8");
response.getWriter().print("서버에서 가져온 값입니다.");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}3. 서버로 값 전달 후 그 결과를 문자열로 받아오기
- jsp
<li>
서버로 값 전달 후 그 결과를 문자열로 받아오기 <br />
<h3>두 값을 더한 결과를 받아오기</h3>
첫번째 숫자 : <input type="number" id="firstNum" /> <br />
두번째 숫자 : <input type="number" id="secondNum" /> <br />
<button id="plusBtn"> 두 수 더하기 </button>
<p id="p2"></p>
<script>
$('#plusBtn').click(function(){
$.ajax({
url : "test3.do",
data : {
firstNum : $('#firstNum').val(),
secondNum : $('#secondNum').val()
}, type : "get",
success : function(data){
$('#p2').text(data);
}, error : function(){
$('#p2').text("에러발생이다");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet3
*/
@WebServlet("/test3.do")
public class TestServlet3 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet3() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int firstNum = Integer.parseInt(request.getParameter("firstNum"));
int secondNum = Integer.parseInt(request.getParameter("secondNum"));
int result = firstNum + secondNum;
response.getWriter().print(result);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}4. JSON 객체를 전달하고 결과 확인하기
- jsp
<li>
JSON 객체를 전다랗고 결과를 확인하기 <br />
내 버킷리스트 작성하기 <br />
1) <input type="text" id="mem1" /> <br />
2) <input type="text" id="mem2" /> <br />
3) <input type="text" id="mem3" /> <br />
4) <input type="text" id="mem4" /> <br />
5) <input type="text" id="mem5" /> <br />
<button id="memTest">버킷리스트 보내기</button>
<script>
$('#memTest').click(function(){
var jsonData = new Object();
jsonData.mem1 = $('#mem1').val();
jsonData.mem2 = $('#mem2').val();
jsonData.mem3 = $('#mem3').val();
jsonData.mem4 = $('#mem4').val();
jsonData.mem5 = $('#mem5').val();
console.log(jsonData);
$.ajax({
url : "test4.do",
data : jsonData,
type : "get",
success : function(data){
console.log("성공했다");
}, error : function(){
console.log("실패했따");
}
});
});
</script>
</li>
- java
@WebServlet("/test4.do")
public class TestServlet4 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet4() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String mem1 = request.getParameter("mem1");
String mem2 = request.getParameter("mem2");
String mem3 = request.getParameter("mem3");
String mem4 = request.getParameter("mem4");
String mem5 = request.getParameter("mem5");
System.out.println(mem1 + "은 우리조");
System.out.println(mem2 + "은 우리조");
System.out.println(mem3 + "은 우리조");
System.out.println(mem4 + "은 우리조");
System.out.println(mem5 + "은 우리조");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}5. 서버로 기본 데이터 전송하고, 서버에서 객체 받아오기
- jsp
<li>
서버로 기본 데이터 전송하고, 서버에서 객체 받아오기 <br />
사용자 번호를 전달하고, 그 번호에 맞는 사용자 받기 <br />
<br />
사용자 번호 : <input type="text" id="userNo" /> <br />
<button id="getUserInfo"> 사용자 정보 조회 </button>
<p id="p3"></p>
<script>
$('#getUserInfo').click(function(){
$.ajax({
url : "test5.do",
data : {userNo : $('#userNo').val() },
type : "get",
success : function(data){
console.log(data);
// data.id / data.id / data.name
$('#p3').text(data.userNo + "/"+ data.name + "/" + data.id );
}, error : function(){
$('#p3').text("에러 발생했다야");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet5
*/
@WebServlet("/test5.do")
public class TestServlet5 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet5() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
int userIdx = Integer.parseInt(request.getParameter("userNo"));
UserVO result = userList.get(userIdx);
JSONObject resultObj = new JSONObject();
response.setContentType("application/json; charset=UTF-8");
resultObj.put("userNo", result.getUserNo()); // ---> { key : value }
resultObj.put("name", result.getName());
resultObj.put("id", result.getId());
response.getWriter().print(resultObj.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}6. 기본값 전달하고 해당 유저가 없는 경우 모든 회원 정보 가져오기
- jsp
<li>
기본값 전송하고, 만약 해당 유저가 없는 경우 모든 회원 정보 가져오기 <br />
사용자 번호 입력하여 서버에 정보를 요청하고, 없을 경우 리스트를 반환 하는 <br />
코드를 작성해 보자 ^0^ <br />
<br />
사용자 번호 : <input type="number" id="userNo2" /> <br />
<button id="getUserInfo2">사용자 조회</button> <br />
<p id="p4"></p>
<script>
$('#getUserInfo2').click(function(){
$.ajax({
url : "test6.do",
data : { userNo : $('#userNo2').val() },
type : "get",
success : function(data){
// console.log(data);
for( var i in data.list){
var user = (data.list)[i];
var text = $('#p4').html();
text += user.userNo + " : ";
text += user.id + " : ";
text += user.name + " <br> ";
$('#p4').html(text);
}
console.log("성공이다 *0* ");
}, error : function(){
console.log("실패다 =0=");
}
});
});
</script>
</li>-java
/**
* Servlet implementation class TestServlet6
*/
@WebServlet("/test6.do")
public class TestServlet6 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet6() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
int userIdx = Integer.parseInt(request.getParameter("userNo")) - 1;
response.setContentType("application/json; charset=UTF-8");
JSONObject result = new JSONObject();
UserVO selectedUser = null;
JSONObject userInfo = new JSONObject();
JSONArray userArray = new JSONArray();
if( userIdx > -1 && userIdx < userList.size() ) {
selectedUser = userList.get(userIdx);
userInfo.put("userNo", selectedUser.getUserNo());
userInfo.put("id", selectedUser.getId());
userInfo.put("name", selectedUser.getName());
userArray.add(userInfo);
} else {
for( UserVO u : userList ) {
userInfo = new JSONObject();
userInfo.put("userNo", u.getUserNo());
userInfo.put("id", u.getId());
userInfo.put("name", u.getName());
userArray.add(userInfo);
}
}
result.put("list", userArray);
response.getWriter().print(result.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}7. 여러 값을 전송하고, 서버에서 리스트를 불러오는 방법
- jsp
<li>
여러 값을 전송하고, 서버에서 리스트를 불러오는 방법 <br />
사용자 번호(번호, 번호, 번호) : <input type="text" id="userNo3" /> <br />
<button id="getUserInfoBtn3">사용자 정보 조회</button><br />
<textarea id="ta1" cols="30" rows="10" style="border:3px solid red;"></textarea>
<script>
$('#getUserInfoBtn3').click(function(){
$.ajax({
url : "test7.do",
data : { userNoList : $('#userNo3').val() },
type : "get",
success : function(data){
console.log(data);
var resultStr = '';
for( var i in data.list ){
var user = data.list[i];
resultStr += user.userNo + " / ";
resultStr += user.name + " / ";
resultStr += user.id + "\n";
}
$('#ta1').val(resultStr);
}, error : function(){
console.log("실패");
}
});
});
</script>
</li>-java
/**
* Servlet implementation class TestServlet7
*/
@WebServlet("/test7.do")
public class TestServlet7 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet7() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
String userIdx = request.getParameter("userNoList");
String[] idxList = userIdx.split(",");
int idx = -1;
JSONObject result = new JSONObject();
UserVO selectedUser = null;
JSONObject userInfo = null;
JSONArray userArray = new JSONArray();
for( String no : idxList ) {
idx = Integer.parseInt(no) -1;
selectedUser = userList.get(idx);
if( selectedUser != null ) {
userInfo = new JSONObject();
userInfo.put("userNo", selectedUser.getUserNo());
userInfo.put("id", selectedUser.getId());
userInfo.put("name", selectedUser.getName());
userArray.add(userInfo);
}
}
result.put("list", userArray);
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(result.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}8. 기본값 전송하고 map 객체로 받아오기
- jsp
<li>
기본값 전송하고 이번엔 Map객체로 받아오기! <br />
사용자 번호 : <input type="text" id="userNo4" /> <br />
<button id="getUserMapBtn"> 정보 조회 하기 </button> <br />
<textarea id="ta2" cols="30" rows="10" style="border: 3px solid blue;"></textarea>
<script>
$('#getUserMapBtn').click(function(){
$.ajax({
url : "test8.do",
data : { userNoList : $('#userNo4').val() },
type : "get",
success : function(data){
console.log(data);
}, error : function(){
console.log("오타 찾아라!!!");
}
});
});
</script>
</li>-java
/**
* Servlet implementation class TestServlet8
*/
@WebServlet("/test8.do")
public class TestServlet8 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet8() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
String userNoList = request.getParameter("userNoList");
String[] userIdx = userNoList.split(",");
int idx = -1;
JSONObject result = new JSONObject();
UserVO selectedUser = null;
JSONObject userMap = null;
for( String no : userIdx ) {
idx = Integer.parseInt(no) - 1;
selectedUser = userList.get(idx);
if( selectedUser != null ) {
userMap = new JSONObject();
userMap.put("userNo", selectedUser.getUserNo());
userMap.put("name", selectedUser.getName());
userMap.put("id", selectedUser.getId());
result.put("user" + idx, userMap);
}
}
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(result.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}9. 서버에서 받아온 사용자 정보로 표 구성하기
- jsp
<li>
서버에서 받아온 사용자 정보로 표 구성하기 <br />
<button id="userTableBtn">사용자 정보 불러오기</button> <br />
<table id="userTb" border="1">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>아이디</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$('#userTableBtn').click(function(){
$.ajax({
url : "test9.do",
type : "get",
success : function(data){
console.log(data);
var $tableBody = $('#userTb tbody');
$.each(data.list, function(idx, value){
var $tr = $('<tr>');
var $noTd = $('<td>').text(value.userNo);
var $nameTd = $('<td>').text(value.name);
var $idTd = $('<td>').text(value.id);
$tr.append($noTd);
$tr.append($nameTd);
$tr.append($idTd);
$tableBody.append($tr);
});
}, error : function(){
console.log("오타 찾아라");
}
});
});
</script>
</li>-java
/**
* Servlet implementation class TestServlet9
*/
@WebServlet("/test9.do")
public class TestServlet9 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet9() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
JSONArray result = new JSONArray();
JSONObject userInfo = null;
for (UserVO u : userList) {
userInfo = new JSONObject();
userInfo.put("userNo", u.getUserNo());
userInfo.put("name", u.getName());
userInfo.put("id", u.getId());
result.add(userInfo);
}
JSONObject result2 = new JSONObject();
result2.put("list", result);
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(result2.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}10. select 태그를 사용하여 가져온 데이터 조회하기
- jsp
<li>
select 태그를 사용하여 가져온 데이터 조회하기 <br />
사용자 이름 : <input type="text" id="userName" />
<button id="selectNameBtn">이름으로 조회</button> <br />
<select id="selectList"></select>
<script>
$('#selectNameBtn').click(function(){
$.ajax({
url : "test10.do",
data : { userName : $('#userName').val() },
type : "post",
success : function(data){
console.log(data);
var $select = $('#selectList');
$select.find("option").remove();
for( var i = 0; i < data.list.length; i++ ){
var name = data.list[i].name;
var selected = (name == $('#userName').val()) ? "selected" : "";
$select.append("<option value='" + data.list[i].userNo
+ "' " + selected + ">" + name + "</option>" );
// <option value='5' selected>홍길동</option>
}
}, error : function(){
console.log("오타 찾기 - 카멜케이스 확인!!");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet10
*/
@WebServlet("/test10.do")
public class TestServlet10 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet10() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "조정석", "test01"));
userList.add(new UserVO(2, "유준상", "test02"));
userList.add(new UserVO(3, "김남길", "test03"));
userList.add(new UserVO(4, "박상면", "qwer"));
userList.add(new UserVO(5, "지진희", "test04"));
userList.add(new UserVO(6, "대장금" , "test05"));
userList.add(new UserVO(7, "임금님" , "test06"));
userList.add(new UserVO(8, "이방원" , "qwert"));
userList.add(new UserVO(9, "태종" , "kdh1"));
userList.add(new UserVO(10, "다니엘" , "zerous1318"));
JSONObject result = new JSONObject();
JSONArray userArray = new JSONArray();
JSONObject userInfo = null;
for( UserVO u : userList ) {
userInfo = new JSONObject();
userInfo.put("userNo", u.getUserNo());
userInfo.put("name", u.getName());
userInfo.put("id", u.getId());
userArray.add(userInfo);
}
result.put("list", userArray);
response.setContentType("application/json; charset=UTF-8");
response.getWriter().print(result.toJSONString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}11. GSON 라이브러리를 이용한 리스트 받기
- jsp
<li>
GSON 라이브러리를 이용한 리스트 받기 <br />
<button id="gsonTestBtn1">gson으로 리스트 받기</button> <br />
<table id="gsonTb" border="1">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>아이디</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$('#gsonTestBtn1').click(function(){
$.ajax({
url : "test11.do",
type : "get",
success : function(data){
// console.log(data);
var $tBody = $('#gsonTb tbody');
$.each(data, function(idx, value){
var $tr = $('<tr>');
var $noTd = $('<td>').text(value.userNo);
var $nameTd = $('<td>').text(value.name);
var $idTd = $('<td>').text(value.id);
$tr.append($noTd);
$tr.append($nameTd);
$tr.append($idTd);
$tBody.append($tr);
});
}, error : function(){
console.log("실패, 오타 찾기");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet11
*/
@WebServlet("/test11.do")
public class TestServlet11 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet11() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<UserVO> userList = new ArrayList<>();
userList.add(new UserVO(1, "토마스", "test01"));
userList.add(new UserVO(2, "김범", "test02"));
userList.add(new UserVO(3, "조정석", "test03"));
userList.add(new UserVO(4, "지오디", "qwer"));
userList.add(new UserVO(5, "현빈", "test04"));
userList.add(new UserVO(6, "원빈" , "test05"));
userList.add(new UserVO(7, "조나단" , "test06"));
userList.add(new UserVO(8, "마동석" , "qwert"));
userList.add(new UserVO(9, "조진웅" , "kdh1"));
userList.add(new UserVO(10, "이방원" , "zerous1318"));
response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(userList, response.getWriter());
// new Gson().fromJson(userList, response.getWriter()); -- 값 가져올때?
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}12. GSON을 사용하여 MAP 반환하기
- jsp
<li>
gson을 사용하여 map 반환하기 <br />
<button id="gsonMapBtn">Map 가져오기</button> <br />
<select id="gsonMapSelect"></select><br />
<script>
$('#gsonMapBtn').click(function(){
$.ajax({
url : "test12.do",
data : { userName : $('#userName').val() },
type : "get",
success : function(data){
console.log(data);
var $select = $('#gsonMapSelect');
$select.find("option").remove();
for( var i in data ){
var $option = $('<option>');
$option.val(data[i].id);
$option.text(data[i].name);
$select.append($option);
// var name = data[i].name;
// var selected = (name == $('#userName').val()) ? "selected" : "";
// $select.append("<option value='" + data[i].userNo
// + "' " + selected + ">" + name + "</option>" );
// <option value='5' selected>홍길동</option>
}
}, error : function(){
console.log("에러다");
}
});
});
</script>
</li>
- java
/**
* Servlet implementation class TestServlet12
*/
@WebServlet("/test12.do")
public class TestServlet12 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public TestServlet12() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Map<String, UserVO> userMap = new HashMap<>();
userMap.put("user01", new UserVO(1, "다니엘헤니", "user01"));
userMap.put("user02", new UserVO(2, "솔라", "user02"));
userMap.put("user03", new UserVO(3,"조정석", "user03"));
userMap.put("user04", new UserVO(4, "펭수", "user04"));
userMap.put("user05", new UserVO(5, "남주혁", "user05"));
userMap.put("user06", new UserVO(6, "서강준","user06"));
userMap.put("user07", new UserVO(7, "야오치" , "user07"));
userMap.put("user08", new UserVO(8, "타요", "user08"));
userMap.put("user09", new UserVO(9, "카피추", "user09"));
userMap.put("user10", new UserVO(10, "이정재", "user10"));
response.setContentType("application/json; charset=UTF-8");
new Gson().toJson(userMap, response.getWriter());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Vo
import java.io.Serializable;
public class UserVO implements Serializable {
// 사용자의 정보를 담는 클래스
// 사용자 번호
// 이름
// 아이디
private int userNo;
private String name;
private String id;
// 2. 생성자
public UserVO() {
super();
}
public UserVO(int userNo, String name, String id) {
super();
this.userNo = userNo;
this.name = name;
this.id = id;
}
// 3. 기능 메소드 - 게터 & 세터
@Override
public String toString() {
return "UserVO [userNo=" + userNo + ", name=" + name + ", id=" + id + "]";
}
public int getUserNo() {
return userNo;
}
public void setUserNo(int userNo) {
this.userNo = userNo;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
}'개발기록 > Java' 카테고리의 다른 글
| 서블릿 예제2 (0) | 2022.01.19 |
|---|---|
| 서블릿 예제1 (0) | 2022.01.19 |
| 서블릿 리스너 ( Servlet Listner) (0) | 2022.01.13 |
| Filter와 Wrapper (0) | 2022.01.13 |
| HttpServletRequest, HttpServletResponse 개념 이해 (0) | 2022.01.13 |