jQuery 의 AJAX 기능을 이용하여 폼 데이터를 전송하는 예
클라이언트측 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery AJAX Form Submit example</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('form').submit(function(event) {
var formData= {
'id' : $('input[name=id]').val(),
'pwd' : $('input[name=pwd]').val()
};
$.ajax({
type : 'POST',
url : $('form').attr('action'),
data : formData,
dataType : 'json',
}).success(function(data) {
alert(data.id+', '+data.pwd+', '+data.result);
});
event.preventDefault();
});
});
</script>
</head>
<body>
<form action="loginProc.jsp" method="post">
<div>아이디 <input type="text" name="id"></div>
<div>비밀번호 <input type="password" name="pwd"></div>
<div><input type="submit" value="Login"></div>
</form>
</body>
</html>
서버측 코드(loginProc.jsp)
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" trimDirectiveWhitespaces="true"%>
<%
String id = request.getParameter("id");
String pwd = request.getParameter("pwd");
%>
{"id":"<%=id%>", "pwd":"<%=pwd%>", "result":"success"}