HTML 속 클라이언트 사이드 스크립트 언어를 단순화 하도록 설계된 브라우저 호환성이 있는 javaScript 라이브러리
.은 클래스, #은 아이디
Using the Core $.ajax Method
$.ajax({
// the URL for the request
url : 'post.php',
// the data to send
// (will be converted to a query string)
// 서버에 전송할 데이터
data : { id : 123 },
// whether this is a POST or GET request
type : 'GET',
// the type of data we expect back
// 서버로 부터 수신할 데이터 타입
dataType : 'json',
// ajax default content-type
contentType : 'application/x-www-form-urlencoded',
// code to run if the request succeeds;
// the response is passed to the function
success : function(json) {
$('<h1/>').text(json.title).appendTo('body');
$('<div class="content"/>')
.html(json.html).appendTo('body');
},
// code to run if the request fails;
// the raw request and status codes are
// passed to the function
error : function(xhr, status) {
alert('Sorry, there was a problem!');
},
// code to run regardless of success or failure
complete : function(xhr, status) {
alert('The request is complete!');
}
});
서버에서 어떤 contentType을 사용하는지
// server contentType: json
$.ajax({
type : 'post',
url : url,
data : JSON.stringify(json),
contentType: 'application/json',
error : function() {},
success : function() {}
});
// server contentType: x-www-form-urlencoded
$.ajax({
type : 'post',
url : url,
data : queryString,
error : function() {},
success : function() {}
});
RequestBody 사용시
데이터를 JSON 타입으로 받아옴.
@RestController
@RequestMapping("/api/users")
public class ApiUserController {
@PostMapping("/login")
public ResponseEntity<Void> login(HttpSession session, @Valid @RequestBody UserDto userDto) throws UnAuthenticationException {
User user = userService.login(userDto.getUserId(), userDto.getPassword());
session.setAttribute(HttpSessionUtils.USER_SESSION_KEY, user);
HttpHeaders headers = new HttpHeaders();
headers.setLocation(URI.create("/"));
return new ResponseEntity<Void>(headers, HttpStatus.OK);
}
}
$("#login button[type=submit]").click(login);
function login(e) {
e.preventDefault();
var url = $('#login').attr("action");
var json = new Object();
json.userId = $('#userId').val();
json.password = $('#password').val();
$.ajax({
type : 'post',
url : url,
data : JSON.stringify(json),
contentType: 'application/json',
error : function(xhr, status, error) {
alert("아이디 또는 비밀번호가 다릅니다.")
},
success : function() {
console.log("success");
location.href = "/";
}
});
}
RequestBody 미사용
@RestController
@RequestMapping("/api/users")
public class ApiUserController {
@PostMapping("/login")
public ResponseEntity<Void> login(HttpSession session, UserDto userDto) throws UnAuthenticationException {
log.debug("=#= login {}", userDto);
User user = userService.login(userDto.getUserId(), userDto.getPassword());
session.setAttribute(HttpSessionUtils.USER_SESSION_KEY, user);
HttpHeaders headers = new HttpHeaders();
headers.setLocation(URI.create("/"));
return new ResponseEntity<Void>(headers, HttpStatus.OK);
}
}
$("#login button[type=submit]").click(login);
function login(e) {
console.log("click login");
e.preventDefault();
var queryString = $("#login").serialize();
console.log(queryString);
var url = $('#login').attr("action");
console.log(url);
$.ajax({
type : 'post',
url : url,
data : queryString,
error : function(xhr, status, error) {
alert("아이디 또는 비밀번호가 다릅니다.")
},
success : function() {
console.log("success");
location.href = "/";
}
});
}