string.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<h1>Hello JSP</h1>
string.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$.ajax('string.jsp', {
success: function (data) {
//alert(data.trim());
$('div').append(data);
}
});
});
});
</script>
</head>
<body>
<button type="button">버튼</button>
<div></div>
</body>
</html>
string2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
String age = request.getParameter("age");
%>
<h1><%=name %> : <%=age %></h1>
string2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$.ajax('string2.jsp', {
data: {name: '홍길동', age: 20},
success: function (data) {
$('div').append(data);
},
type: 'POST'
});
});
});
</script>
</head>
<body>
<button type="button">버튼</button>
<div></div>
</body>
</html>
xml.jsp
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<members>
<member>
<name>홍길동</name>
<gender>남자</gender>
<email>aa@a.com</email>
</member>
<member>
<name>성춘향</name>
<gender>여자</gender>
<email>bb@b.com</email>
</member>
<member>
<name>이몽룡</name>
<gender>남자</gender>
<email>cc@c.com</email>
</member>
</members>
xml.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$.ajax('xml.jsp', {
success: function (data) {
// j1/test5.jsp 참고
$(data).find('member').each(function () {
// $(this)는 <member> 엘리먼트임
var name = $(this).find('name').text();
var gender = $(this).find('gender').text();
var email = $(this).find('email').text();
$('div').append('<h1>' + name + ':' + gender + ':' + email + '</h1>');
})
}
});
});
});
</script>
</head>
<body>
<button type="button">버튼</button>
<div></div>
</body>
</html>
xmlMembers.jsp
<%@page import="com.example.domain.Member"%>
<%@page import="java.util.List"%>
<%@page import="com.example.repository.MemberDao"%>
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
// DB객체 준비
MemberDao memberDao = MemberDao.getInstance();
List<Member> list = memberDao.getMembers();
%>
<members>
<%
for (Member member : list) {
%>
<member>
<id><%=member.getId() %></id>
<name><%=member.getName() %></name>
<email><%=member.getEmail() %></email>
</member>
<%
}
%>
</members>
xmlMembers.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('div').empty();
$.ajax('xmlMembers.jsp', {
success: function (data) {
// j1/test5.jsp 참고
$(data).find('member').each(function () {
// $(this)는 <member> 엘리먼트임
var id = $(this).find('id').text();
var name = $(this).find('name').text();
var email = $(this).find('email').text();
$('div').append('<h1>' + id + ':' + name + ':' + email + '</h1>');
})
}
});
});
});
</script>
</head>
<body>
<button type="button">버튼</button>
<div></div>
</body>
</html>
'IT > jQuery' 카테고리의 다른 글
| jQuery - ajax통신, json DB연결하여 생성, json-simple 라이브러리 사용 (0) | 2018.11.18 |
|---|---|
| jQuery - 이미지 사이즈 변경, 이미지 자동으로 넘김 처리 (0) | 2018.11.18 |
| jQuery - checkbox attr과 prop의 차이 (0) | 2018.11.17 |
| jQuery - 애니메이션 show(), hide(), toggle(), innerfade, animate (0) | 2018.11.17 |
| jQuery - form submit 이벤트 함수, event.preventDefault() (0) | 2018.11.17 |