1. load() 함수
간단하게 메시지 보낼 때 쓸 수 있음.
(1) URL
$(selector).load(URL);
$('#b1').click(function(){
$('#d1').load('server1.jsp');
});
<div id="d1"></div>
<input type="button" id="b1" value="data_load">
(2) URL, function()
$(selector).load(URL, function(res, stat, xhr){});
load( 주소, 비동기 요청 응답시 자동 호출될 함수 )
res : 서버로 부터 받은 응답값
stat : 응답상태. 'success', 'error' 로 문자열로 옴.
xhr : 지금 사용한 비동기 객체
$('#b2').click(function(){
$('#d2').load('server2.jsp', function(res, stat, xhr){
if(stat=='success'){
let arr = JSON.parse(res);
let txt = '';
for(let obj of arr){ // for-of: 배열 값 꺼냄.
for(let key in obj){ // for-in: 키 꺼냄.
txt += key + ": " + obj[key] + "<br/>";
}
}
$(this).html(txt);
} else {
alert('error');
}
});
});
<input type="button" id="b2" value="data_load2"><br/>
(3) URL, data
$(selector).load(URL, data);
data : 서버로 전송할 값
$('#b3').click(function(){
let param={'name':$('#name').val(), 'tel':$('#tel').val()};
$('#d3').load('server3.jsp', param);
});
name:<input type="text" id="name"><br/>
tel:<input type="text" id="tel"><br/>
<input type="button" id="b3" value="data_load3">
총 코드
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#b1').click(function(){
$('#d1').load('server1.jsp');
});
$('#b2').click(function(){
// load(주소, 비동기요청응답시 자동호출될 함수)
// res : 서버로부터 받은 값
// stat : 응답 상태 'success','error' 로 문자열로 옴
// xhr : 지금 사용한 비동기 객체
$('#d2').load('server2.jsp', function(res, stat, xhr){
if(stat=='success'){
let arr = JSON.parse(res);
let txt = '';
for(let obj of arr){ // for-of: 값 꺼냄. -- arr배열의 값(전체)을 obj에 넣어라
for(let key in obj){ // for-in: 키 꺼냄.
txt += key + ": " + obj[key] + "<br/>";
}
}
$(this).html(txt);
} else {
alert('error');
}
});
});
$('#b3').click(function(){
let param={'name':$('#name').val(), 'tel':$('#tel').val()};
// load('url', 서버로전송할 데이터, 핸들러:비동기요청의 응답오면 자동호출)
$('#d3').load('server3.jsp', param);
});
});
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<input type="button" id="b1" value="DATA_LOAD">
<INPUT TYPE="BUTTON" ID="B2" VALUE="DATA_LOAD2"><BR/>
name:<input type="text" id="name"><br/>
tel:<input type="text" id="tel"><br/>
<input type="button" id="b3" value="data_load3">
</body>
</html>
2. ajax() 함수
- 전역함수
$.ajax({
url:서버주소,
type: 전송방식(get/post),
data: 전송할 데이터-JSON형태,
dataType: 응답 데이터 타입 ( 'json', 'text', 'xml'),
success:function(result){} 성공시 실행될 함수 등록, // result : 서버 응답 값
error:function(req, status){} 응답 에러시 실행될 함수 등록 // req : 요청객체, status : 상태값
});
(1)
$('#b1').click(function(){
$.ajax({
url: 'server1.jsp',
type: 'post',
dataType: 'text',
success:function(result){ //result : server1의 값
$('#d1').text(result);
},
error:function(req, status){
alert(status);
}
});
});
<div id="d1"></div>
<input type="button" id="b1" value="data_load">
(2)
$('#b2').click(function(){
$.ajax({
url: 'server2.jsp',
type: 'post',
dataType: 'json',
success:function(result){ //result : json 형태로 받아오니까 배열.
let txt = '';
for(let obj of result){
for(let key in obj){
txt += key + ": " + obj[key] + "<br/>";
}
}
$('#d2').html(txt);
},
error:function(req, status){
alert(status);
}
});
});
(3)
$('#b3').click(function(){
$.ajax({
url: 'server3.jsp',
type: 'post',
data: {'name':$('#name').val(), 'tel':$('#tel').val()},
dataType: 'text',
success:function(result){ //result : json 형태로 받아오니까 배열.
$('#d3').html(result);
},
error:function(req, status){
alert(status);
}
});
});
name:<input type="text" id="name"><br/>
tel:<input type="text" id="tel"><br/>
<input type="button" id="b3" value="data_load3">
(4)
$('#b4').click(function(){
let formData = $('#f1').serialize(); // 폼 데이터를 자동으로 name=aaa&tel=111 식으로 전환.
$.ajax({
url: 'server3.jsp',
type: 'post',
data: formData,
dataType: 'text',
success:function(result){ //result : 배열.
$('#d3').html(result);
},
error:function(req, status){
alert(status);
}
});
});
총 코드
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#b1').click(function(){
$.ajax({
url: 'server1.jsp',
type: 'post',
dataType: 'text',
success:function(result){ //result : server1의 값
$('#d1').text(result);
},
error:function(req, status){
alert(status);
}
});
});
$('#b2').click(function(){
$.ajax({
url: 'server2.jsp',
type: 'post',
dataType: 'json',
success:function(result){ //result : json 형태로 받아오니까 배열.
let txt = '';
for(let obj of result){ // for-of: 값 꺼냄. -- 배열의 값(전체)을 obj에 넣어라
for(let key in obj){ // for-in: 키 꺼냄.
txt += key + ": " + obj[key] + "<br/>";
}
}
$('#d2').html(txt);
},
error:function(req, status){
alert(status);
}
});
});
$('#b3').click(function(){
$.ajax({
url: 'server3.jsp',
type: 'post',
data: {'name':$('#name').val(), 'tel':$('#tel').val()},
dataType: 'text',
success:function(result){ //result : json 형태로 받아오니까 배열.
$('#d3').html(result);
},
error:function(req, status){
alert(status);
}
});
});
$('#b4').click(function(){
// FormData(): 폼 안의 입력양식 값을 자동으로 JSON형태(키:값)로 변환해주는 객체
// FormData 는 multipart로 전송할 때 됨.
let formData = $('#f1').serialize(); // 폼 데이터를 자동으로 name=aaa&tel=111 식으로 전환.
// $('#f1')[0] == document.getElementsByTagName("body")[0]
// 선택자로 꺼내면 하나밖에 없어도 배열로 반환함.
$.ajax({
url: 'server3.jsp',
type: 'post',
// processData: false, // true: 데이터를 url 뒤에 붙여서 전송, false: 데이터를 패킷 헤더에 담아 전송
// contentType: true, // true: application으로 전송, false: multipart로 전송(파일업로드..)
data: formData,
dataType: 'text',
success:function(result){ //result : 배열.
$('#d3').html(result);
},
error:function(req, status){ // req: 요청객체, status: 상태값
alert(status);
}
});
});
});
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<input type="button" id="b1" value="data_load">
<input type="button" id="b2" value="data_load2"><br/>
name:<input type="text" id="name"><br/>
tel:<input type="text" id="tel"><br/>
<input type="button" id="b3" value="data_load3">
<form id="f1">
name:<input type="text" id="name" name="name"><br/>
tel:<input type="text" id="tel" name="tel"><br/>
<input type="button" id="b4" value="param_test">
</form>
</body>
</html>