ajax 문법이 어느역할을 하는지? 를 중점에 두고 보시면 좋을겁니다 !!
사용된 예제는
Spring이 아니고 DynamicWebProject 입니다. 통신방법 메소드 맵핑 하는 맥락은 비슷비슷하지만요~
ajax 공부를 하기위해 여러 블로그들을 돌아다니다 보면, $.get , $.post ? .success() 등등.. 다양한 문법이 있는데
문법은 다 다르지만 작동은 다 될거에요 !!!
ajax 문법 정의
$.ajax({
(요청 정보 작성)
(필수)type: get,post,delete ... , HTTP Method (기본값 GET 이지만 그래도 명시해주는게 좋음)
(필수)url: "http://localhost:8080/블라블라" , 요청을 보낼 주소
data: , 서버에 전송할 http의 body ( 보통 GET 요청은 data가 없다 )
contentType: , (기본값)" application / x - www - form - urlencoded "
dataType: "text, html, xml, json ... " 서버에서 반환되는 데이터 형식을 지정합니다.
(dataType 생략할 시 jQuery가 알아서 정함)
})
.done(function(result){
요청 성공시 동작하는 콜백함수입니다!!
})
이렇게 틀을 먼저 만들고 내용을 채워나가는 걸 추천드립니다 ~
$.ajax({}).done(res=>{}).fail(error=>{})
getajax.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="getajax()">
<input type="text" id="username" name="username" placeholder="username"/>
<input type="password" id="password" name="password" placeholder="password"/>
</form>
<button onclick="getajax()">클릭</button>
</body>
<script>
function getajax(){
var username = $("#username").val();
var password = $("#password").val();
console.log(username);
console.log(password);
var params = "username="+username;
params += "&password="+password;
$.ajax({
//GET으로 key=value로 데이터를 전달하고 text/plain으로 응답받을 예정
type:"GET",
url:"http://localhost:8000/ajax/ajax1?" + params,
//data: , get은 전송할 http의 body가 없음, 그래서 data필드가 필요없음
//contentType: ,전송한 data가 없으니까 그 data를 설명한 필드도 필요없음
dataType: "text"
})
.done(function(result){ //ajax통신 완료후에 정상이면 실행
alert(result);
})
.fail(function(){
alert("통신실패");
});
}
</script>
</html>
|
cs |
get방식의 주소요청 (파라미터가 주소에 보인다)
31행 : url = http://localhost:8000/ajax/ajax1? + "username="+username + "&password="+password
Ajax1.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
package com.cos.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax1")
public class Ajax1 extends HttpServlet {
private static final long serialVersionUID = 1L;
public Ajax1() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println("username: "+username);
System.out.println("password: "+password);
// ajax의 done함수 result 에 들어갈 내용
PrintWriter out = response.getWriter();
response.setCharacterEncoding("utf-8");
StringBuffer sb = new StringBuffer();
sb.append("username="+username+"\n");
sb.append("password="+password);
out.println(sb);
out.flush();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
|
cs |
12행 : @WebServlet("/ajax1") : /ajax1 으로 끝나는 주소요청을 담당하는 java파일임을 알린다.
20행 : doGet(request, response) : get 요청일때 동작하는 함수
21, 22행 : 요청된 주소( url = http://localhost:8000/ajax/ajax1? + "username="+username +"&password="+password )의 파라미터 이름이 username, password인 값을 자바 변수로 정의한다
28행 : requset (요청)은 모두 파악했으니, 이제 response (응답)할 차례.
32, 33행 : 응답을 HTML로 하기때문에 그에 맞는 문법을 사용한다. ( HTML 태그가 사용가능하다 )
결과
결과 해석
ajax 문법 정의
$.ajax({
(요청 정보 작성)
(필수)type: get,post,delete ... , HTTP Method (기본값 GET 이지만 그래도 명시해주는게 좋음)
(필수)url: "http://localhost:8080/블라블라" , 요청을 보낼 주소
data: , 서버에 전송할 http의 body ( 보통 GET 요청은 data가 없다 )
contentType: , (기본값)" application / x - www - form - urlencoded "
dataType: "text, html, xml, json ... " 서버에서 반환되는 데이터 형식을 지정합니다.
(dataType 생략할 시 jQuery가 알아서 정함)
})
.done(function(result){
요청 성공시 동작하는 콜백함수입니다!!
})
아직 미완성입니다
'AJAX' 카테고리의 다른 글
| ajax 통신 개념정리 (0) | 2021.03.27 |
|---|---|
| (펌)HTTP 그리고 REST API 다가가기 (0) | 2021.03.27 |
