Jquery를 이용하여 Ajax를 활용하느 여러 가지 방법을 알아보자.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<script src = "${pageContext.request.contextPath}/resources/js/jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function(){
/*Jquery ajax 이용 - 1
$("#my-form").submit(function(event){
var name = $("#name").val();
var age = $("#age").val();
//ActionWithData에서 자료를 가져옵니다
var url = "/Home/ActionWithData?name=" + name + "&age=" + age;
$("#wrap").load(url);
event.preventDefault();
});*/
/*Jquery ajax 이용 - 2
$("#my-form").submit(function(event){
var name = $("#name").val();
var age = $("#age").val();
var url = "/Home/ActionWithData";
var data = {name : name, age: age};
var params = $.param(data);
$("#wrap").load(url, params);//Ajax를 수행한 후, 선택자로 선택한 문서 객체 안에 응답 받을 문자열을 삽입
event.preventDefault();
});*/
/*Jquery ajax 이용 - 3 (굉장히 유연하기 때문에 많이 사용 but submit 이벤트와 연결하는 경우는 많지 않음
$("#my-form").submit(function(event){
var name = $("#name").val();
var age = $("#age").val();
var url = "/Home/ActionWithData";
var data = {name : name, age: age};
$("#wrap").load(url, data);
event.preventDefault();
});*/
/*Jquery ajax 이용 - 4 ★(추천)
$("#my-form").submit(function(event){
var url = "/Home/ActionWithData";
$("#wrap").load(url,this.serialize());// serialize(): 입력 양식에 적힌 값 -> 쿼리 문자열 변환
//name=rainbow&age=300;
event.preventDefault();
});*/
/*Jquery ajax 이용 - 5 ★(추천)
$("#my-form").submit(function(event){
var url = "/Home/ActionWithData";
$("#wrap").load(url, $(this).serializeArray());//serializeArray(): 입력 양식에 적힌 값 -> 객체로 변환
//리턴 값 [object object],[object object] 배열로 리턴
event.preventDefault();
});*/
$("#my-form").submit(function(event){
var url = "/Home/ActionWithData";
var serialize = $(this).serialize();
var serializeArray = $(this).serializeArray();
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="my-form">
<table>
<tr>
<td><label for="name">Name</label></td>
<td><input id="name" name="name" type="text" /></td>
</tr>
<tr>
<td><label for="age">Age</label></td>
<td><input id="age" name="age" type="text" /></td>
</tr>
</table>
<input type="submit" value="Get Ajax String" />
</form>
<div id="wrap">
</div>
</body>
</html>
출처: 모던 웹을 위한 자바스크립 & 제이쿼리
'JAVASCRIPT > JQUERY' 카테고리의 다른 글
| [Jquery] 이벤트 발생 객체 안에서 한정된 선택자 찾기 (0) | 2018.03.08 |
|---|---|
| [Jquery]selector 범위를 한정하는 context - $(selector, context) 사용 (0) | 2018.02.20 |
| [Jquery]Select에서 선택된 option value -Jquery 입력 양식 필터 선택자 (0) | 2018.02.19 |
| [Jquery]Mask Plgin 사용 (0) | 2018.02.01 |