서버06_ajax
ajax
- 새로고침 없이 처리!!!
- 전체 페이지가 아니라 원하는 일부분만 갱신(서버와 통신)해줌!!
폴더 및 파일 만들기
경로확인
바로 servlet 파일 만들기
jQeuery 넣기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>index page</h1>
<button onclick="ajaxTest();">ajax test</button>
<script>
$(function(){
console.log(123);
})
</script>
</body>
</html>- ✨✨✨
127.0.0.1:8888/ajax
jQuery로 ajax 요청 보내기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>index page</h1>
<button onclick="ajaxTest();">ajax test</button>
<script>
function ajaxTest(){
//ajax는 JS, jQuery 둘다 사용가능
/* 클라이언트->서버 요청 보내고 받는 거
*/
//ajax 호출 : $.ajax({});
$.ajax({
// /myServlet 에게 요청
url : "/ajax/myServlet",
//ajax로 데이터를 담아서 요청 보내기
data : {
name : "sim",
age : 20,
addr : "korea"
},
// 요청이 정상적으로 처리가 됐을 때
success : function(result){alert("success!!");},
// 실패했을 때
error : function(result){alert("error~!~");},
// success, error 에서의 콜백함수가 수행된 후에 실행
complete : function(result){alert("complete..!!");}
});
}
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>index page</h1>
<button onclick="ajaxTest();">ajax test</button>
<script>
function ajaxTest(){
//ajax는 JS, jQuery 둘다 사용가능
/* 클라이언트->서버 요청 보내고 받는 거
*/
//ajax 호출 : $.ajax({});
$.ajax({
// /myServlet 에게 요청
url : "/ajax/myServlet",
//ajax로 데이터를 담아서 요청 보내기
data : {
name : "sim",
age : 20,
addr : "korea"
},
// 요청이 정상적으로 처리가 됐을 때
success : function(result){alert("success!!");},
// 실패했을 때
error : function(result){alert("error~!~");},
// success, error 에서의 콜백함수가 수행된 후에 실행
complete : function(result){alert("complete..!!");}
});
}
</script>
</body>
</html>
ajax에서 보낸 데이터(가 담긴 요청을) 받아서 처리
package com.kh.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("myServlet service called ...");
//ajax로 보내서 전달받은 데이터를 처리할 수 있다.
//1. 사용자로부터 전달받은 데이터 꺼내기
String name = req.getParameter("name");
String age = req.getParameter("age");
String addr = req.getParameter("addr");
//2. 꺼낸 데이터 출력하기
System.out.println("name : "+name);
System.out.println("age : "+age);
System.out.println("addr : "+addr);
//3.응답을 보내줄 수 있음
}
}
응답을 보내줄 수 있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>index page</h1>
<button onclick="ajaxTest();">ajax test</button>
<script>
function ajaxTest(){
//ajax는 JS, jQuery 둘다 사용가능
/* 클라이언트->서버 요청 보내고 받는 거
*/
//ajax 호출 : $.ajax({});
$.ajax({
// /myServlet 에게 요청
url : "/ajax/myServlet",
//ajax로 데이터 보내기
data : {
name : "sim",
age : 20,
addr : "korea"
},
// 요청이 정상적으로 처리가 됐을 때
success : function(result){console.log("success : "+result);},
// 실패했을 때
error : function(result){console.log("error : "+result);},
// success, error 에서의 콜백함수가 수행된 후에 실행, finally
complete : function(result){console.log("complete : "+result);}
});
}
</script>
</body>
</html>package com.kh.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("myServlet service called ...");
//ajax에서 전달받은 데이터를 처리할 수 있다.
//1. 사용자로부터 전달받은 데이터 꺼내기
String name = req.getParameter("name");
String age = req.getParameter("age");
String addr = req.getParameter("addr");
//2. 꺼낸 데이터 출력하기
System.out.println("name : "+name);
System.out.println("age : "+age);
System.out.println("addr : "+addr);
//응답을 보내줄 수 있음
resp.setContentType("text/html; charset=UTF-8");
resp.getWriter().print("data from server");
}
}
- ✨success :
result객체의 responseText 속성이 - ✨error, complete :
result 객체가 그대로 나오게 된다???
사용자 입력값으로....
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>index page</h1>
age : <input type="text" id="age">
<br>
<span id="isAdult"></span>
<br>
<button onclick="ajaxTest();">ajax test</button>
<script>
function ajaxTest(){
//ajax는 JS, jQuery 둘다 사용가능
/* 클라이언트->서버 요청 보내고 받는 거
*/
//ajax 호출 : $.ajax({});
$.ajax({
// /myServlet 에게 요청
url : "/ajax/myServlet",
method : "GET",
//ajax로 데이터 보내기
data : {
name : "sim",
age : $('#age').val(),
addr : "korea"
},
// 요청이 정상적으로 처리가 됐을 때
success : function(result){
console.log("success : "+result);
$("#isAdult").text(result);
},
// 실패했을 때
error : function(result){
console.log(result);
},
// success, error 에서의 콜백함수가 수행된 후에 실행, finally
complete : function(result){
console.log(result);
}
});
}
</script>
</body>
</html>package com.kh.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class MyServlet
*/
@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("myServlet service called ...");
//ajax에서 전달받은 데이터를 처리할 수 있다.
//1. 사용자로부터 전달받은 데이터 꺼내기
String name = req.getParameter("name");
String age = req.getParameter("age");
String addr = req.getParameter("addr");
//2. 꺼낸 데이터 출력하기
System.out.println("name : "+name);
System.out.println("age : "+age);
System.out.println("addr : "+addr);
//응답을 보내줄 수 있음
resp.setContentType("text/html; charset=UTF-8");
// resp.getWriter().print("data from server");
if(Integer.parseInt(age) >= 20) {
resp.getWriter().print("adult");
} else {
resp.getWriter().print("KID");
}
}
}
Author And Source
이 문제에 관하여(서버06_ajax), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lecharl/서버06저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
