[jQuery] Ajax 데이터통신 기본
Ajax 데이터통신 기본
1. 파일 내용
(1) test.html
<!DOCTYPE>
<html>
<head>
<title> jquery Ajax test </title>
<meta charset="utf-8" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
callAjax();
});
});
function callAjax(){
$.ajax({
type: "post",
url : "./test2.jsp",
data: {
number : $('#number').val(),
id : $('#id').val(),
comment : $('#comment').val()
},
success: whenSuccess,
error: whenError
});
}
function whenSuccess(resdata){
$("#ajaxReturn").html(resdata);
console.log(resdata);
}
function whenError(){
alert("Error");
}
</script>
</head>
<body>
<div style="width:500px;margin:auto;margin-top:200px;">
<form id="frm">
<div>
<label>글번호</label><input name="number" id="number" >
</div>
<div style="margin-top:20px;">
<label>아이디</label><input name="id" id="id">
</div>
<div style="margin-top:20px;">
<label>코멘트</label><input name="comment" id="comment">
</div>
<div style="margin-top:20px;">
<input id="button" type="button" value="버튼">
</div>
</form>
<div id="ajaxReturn">ajaxReturnOutput</div>
</div>
</body>
</html>
(2) test2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<% request.setCharacterEncoding("utf-8"); %>
<% response.setContentType("text/html; charset=utf-8"); %>
<html>
<head>
<title>JSP Example</title>
</head>
<body>
<p>
<%
String number = request.getParameter("number");
String id = request.getParameter("id");
String comment = request.getParameter("comment");
HashMap<String,String> map = new HashMap<String,String>();
map.put("number",number);
map.put("id",id);
map.put("comment",comment);
%>
글번호:<%=map.get("number")%><br>
아이디:<%=map.get("id")%><br>
코멘트:<%=map.get("comment")%><br>
<%
%>
</p>
</body>
</html>
실행결과)
버튼 클릭시 출력되는 예제이다.
cf.) serialize() 예제
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> jquery Ajax test </title>
<meta charset="utf-8" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").click(function(){
callAjax();
});
});
function callAjax(){
var dataString = $("form").serialize(); //파라미터 직렬화 times=10&id=abc&comment=def
$("#postedParam").text("afterParameter:"+dataString); //확인용 화면에 뿌려보자
$.ajax({
type: "POST",
url : "http://localhost:8080/AjaxPrograming/temp/test.jsp",
data: dataString, //서버로 보낼 데이터 data변수(form객체 컬렉션)
success: whenSuccess, //성공시 callback함수 지정
error: whenError //실패시 callback함수 지정
});
}
// 성공시 호출될 함수
function whenSuccess(resdata){
$("#ajaxReturn").html(resdata);
console.log(resdata);
}
// 실패시 호출될 함수
function whenError(){
alert("Error");
}
</script>
</head>
<body>
<div style="width:500px;margin:auto;margin-top:200px;">
<form id="frm">
<div>
<label>반복횟수</label><input name="number" value="10">
</div>
<div style="margin-top:20px;">
<label>아이디</label><input name="id">
</div>
<div style="margin-top:20px;">
<label>코멘트</label><input name="comment">
</div>
<div style="margin-top:20px;">
<input id="button" type="button" value="버튼">
</div>
</form>
<div id="postedParam">beforeParameter</div>
<div id="ajaxReturn">ajaxReturnOutput</div>
</div>
</body>
</html>
출처: https://devbox.tistory.com/entry/jQuery-jQeury를-이용해-JSON-데이터-가져오기?category=578062 [장인개발자를 꿈꾸는 :: 기록하는 공간]
'Javascript > jQuery' 카테고리의 다른 글
| [jQuery] jQuery Quick API (0) | 2020.07.08 |
|---|---|
| [jQuery] jQuery Plugin을 이용한 form validation (0) | 2020.07.08 |
| [jQuery] dataType속성을 이용한 JSON 데이터 가져오기 (0) | 2020.07.08 |
| [jQuery] $.getJSON 이용한 JSON 데이터 가져오기 (0) | 2020.07.08 |
| [jQuery] 문서 준비 이벤트 (0) | 2020.07.08 |
| [jQuery] Ajax 설정 (0) | 2020.07.08 |
| [jQuery] Ajax 기초 (0) | 2020.07.08 |
| [jQuery] Chain (0) | 2020.07.08 |