● data.jsp에 데이터를 넣어주고 index.jsp로 불러온다. 하지만 index.jsp에서 계속 진행된다.
data.jsp
<body>
t1=<%=request.getParameter("t1") %>
t2=<%=request.getParameter("t2") %>
</body>index.jsp
<!-- 비동기처리 ex1 -->
<p id="demo"></p>
<br>
<button type="button"> click </button>
<script type="text/javascript">
$(function name() {
$("button").click(function () {
// $("#demo").load("data.html");
// $("#demo").load("data.html #data1");
$("#demo").load("data.jsp", "t1=abc&t2=가나다");
});
});$(function name() {
$("button").click(function () {
$("#demo").load("data.jsp", { t1:"ABC", t2:"라마바" }); // Json
});
});
● "데이터가 가서 데이터를 던져주고 오는것이 성공했다"
<!-- 비동기처리 ex1 -->
<p id="demo"></p>
<br>
<button type="button"> click </button>
<script type="text/javascript">
$(function name() {
$("button").click(function () {
$("#demo").load("data.jsp", { t1:"ABC", t2:"라마바" }); // Json
$("#demo").load(
"data.jsp",
{ t1:"DEF", t2:"가나다" },
function(data, status, xhr){
// data, status, xhr => 매개변수, 가인수. d, s, x 등으로도 가능
alert('success');
// 통신 성공(이쪽과 통신했다)
}
);
});
});
</script>
</body>
</html>
● 로드 함수를 통해서도 비동기 처리가 가능하다.
다만 로드는 데이터를 받을 때 JSON 형태로 받아야하는 것이 안 된다. 그래서 Ajax를 사용한다.
<script type="text/javascript">
$(function name() {
$("button").click(function () {
$("#demo").load("data.jsp", { t1:"ABC", t2:"라마바" }); // Json
$("#demo").load(
"data.jsp",
{ t1:"DEF", t2:"가나다" },
function(data, status, xhr){ // data, status, xhr => 매개변수, 가인수. d, s, x 등으로도 가능
//alert('success'); // 통신 성공(이쪽과 통신했다)
// alert(data);
$("#demo").append("data = " + data + " <br>");
$("#demo").append("status = " + status + "<br>");
$("#demo").append("xhr = " + xhr + "<br>");
}
);
});
});
</script>
</body>
</html>→ JavaScript에서 Onload와 비슷하다.
'개발 > JavaScript' 카테고리의 다른 글
| [Ajax] #05. xml 파싱 :: 파일 불러와서 접근하는 방법 (0) | 2020.07.25 |
|---|---|
| [Ajax] #04. Json 파일 읽어오기 :: for문, each문 사용 (0) | 2020.07.25 |
| [Ajax] #03. Ajax 예제 :: (2) Click시 jsp -> html -> jsp 데이터 갔다가 돌아오기 (0) | 2020.07.25 |
| [Ajax] #01. Ajax의 정의와 필요성 (0) | 2020.07.25 |
| [JQuery] #01. 정의 / JQuery 링크 설정 / 핸들러 함수 (0) | 2020.07.15 |
