data.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>우유</td>
<td>2000</td>
</tr>
<tr>
<td>홍차</td>
<td>5000</td>
</tr>
<tr>
<td>커피</td>
<td>5000</td>
</tr>
</table>
</body>
</html>ajax-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 제이쿼리 DSK로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//alert('onload');
$.ajax('data.html',{
success : function(data){
$('body').append(data);
}
});
});
</script>
</head>
<body>
<h1>가격표</h1>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 제이쿼리 DSK로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url : 'data.html',
success : function(data) {
$('body').append(data);
}
});
});
</script>
</head>
<body>
<h1>가격표</h1>
</body>
</html>
parameter.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div> 이름 : ${param.pname} </div>
<div> 가격 : ${param.price} </div><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 제이쿼리 DSK로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url : 'parameter.jsp',
type : 'GET', // get post put delete
data : {
pname : '우유',
price : 2000,
},
success : function(data){
$('body').append(data);
}
});
});
</script>
</head>
<body>
<h1>가격표</h1>
</body>
</html>
위에것을 동적으로 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 제이쿼리 DSK로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
//alert('onload');
$('input:button').click(function(){
$.ajax({
url : 'parameter.jsp',
type : 'get', // http method get, post, put, delete
data : {
pname: $('#pname').val(),
price: $('#price').val()
},
success : function(data) {
$('body').append(data);
}
});
});
});
</script>
</head>
<body>
<h3>제품등록</h3>
이름 <input type="text" id="pname"><br>
가격 <input type="number" id="price"><br><br>
<input type="button" value="등록"><br>
<hr>
<br>
<h1> 가격표</h1>
</body>
</html>
idcheck.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!-- 공백제거 -->
${param.uid eq 'cool'? 'N' : 'Y'}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Jquery SDK 로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('#uid').focusin(function(){
//alert('focusin');
//$('#msg').html('사용할수 있는 아이디 입니다.');
$('#msg').addClass('display_none');
$('#msg').removeClass('color_blue');
$('#msg').removeClass('color_red');
});
//$('#idChkBtn').click(function(){
$('#uid').focusout(function(){
$.ajax({
url : 'idcheck.jsp',
type : 'post',
data : {
uid: $('#uid').val()
},
beforeSend : function(){
console.log('beforeSend');
$('#loaddingImg').removeClass('display_none');
},
success : function(data){
//alert(data);
if(data == 'Y') {
$('#msg').html('사용할수 있는 아이디 입니다.');
$('#msg').removeClass('display_none');
$('#msg').addClass('color_blue');
} else {
$('#msg').html('사용할수 없는 아이디 입니다.');
$('#msg').removeClass('display_none');
$('#msg').addClass('color_red');
}
},
error : function(request, status, error){
console.log('request', request);
console.log('status', status);
console.log('error', error);
},
complete : function(){
setTimeout(function(){
$('#loaddingImg').addClass('display_none');
}, 3000);
}
});
});
});
</script>
<style>
.display_none {
display: none;
}
.display_block {
display: block;
}
.color_red {
color : red;
}
.color_blue {
color: blue;
}
/* #msg {
display: none;
} */
</style>
</head>
<body>
id <input type="text" id="uid">
<input type="button" id="idChkBtn" value="아이디 체크">
<div id="msg" class="display_none"></div><br>
<img id="loaddingImg" class="display_none" alt="loadding" src="loading.gif">
</body>
</html>
serialize / serializeArray
- 입력받는 값이 많을수록 편리하며 id가 아닌 name으로 캐스팅 한다.
- parameter.jsp는 위에 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 제이쿼리 DSK로드 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('#myform').submit(function(event){
console.log($(this).serialize()); // input 파라미터 쿼리스트림을 문자열로 처리
console.log($(this).serializeArray());
//입력받는게 많을수록 더 편리하다. id가아닌 name으로 캐스팅한다.
$.ajax({
url : 'parameter.jsp',
data : $(this).serialize(),
// data : data : $(this).serializeArray()로 받아도 괜찮음
success : function(data){
$('body').append(data)
}
});
return false;
});
});
</script>
</head>
<body>
<h3>제품등록</h3>
<form id="myform">
이름 <input type="text" id="pname" name="pname"><br>
가격 <input type="number" id="price" name="price"><br><br>
<input type="submit" value="등록"><br>
</form>
<hr>
<br>
<h1> 가격표</h1>
</body>
</html>
'front-end > Javascript & jquery' 카테고리의 다른 글
| [자바스크립트] 메모 - 컨텐츠 요소를 가운데 오게 하는 방법 (0) | 2020.12.03 |
|---|---|
| [자바스크립트] 메모 - text에 숫자만 입력받기 (0) | 2020.12.03 |
| [jquery] 마우스 / 키보드 / 입력양식 이벤트 (0) | 2020.12.03 |
| [jquery] 이벤트 연결 범위 한정 / delegate 방식 (0) | 2020.12.03 |
| [jquery] 이벤트 / on() / 제이쿼리 이벤트 전달(버블링) 막기 (bubbling) (6) | 2020.12.03 |
| [jquery] 문서 객체 생성, 삽입, 이동 / $() / appendTo() / append() (0) | 2020.12.02 |
| [jquery] 문서 객체의 내부 검사 및 추가 / html() / text() (0) | 2020.12.02 |