Ajax
Ajax_개념_JSON
climb-up
2022. 5. 13. 19:17
JSON (JavaScript Object Notation)
: Map(키, 밸류)방식
: 라이브러리 필요
문제점
1) 형태는 객체인데 타입이 String이라 활용이 어렵다.
2) 인코딩을 해줘야한다.
해결방법
response.setContentType("application/json; charset=UTF-8");
: 제이슨방식+인코딩 문제를 한 번에 해결.
(dataType에서 작성해주는 것을 권장한다.) --> dataType: 'json',
1) obj[attr] : 불완전했을 때 $_ 등등 들어가있을 때 사용
2) obj.attr : 완전했을 때 사용
$('#p').text(resultStr);
$('#textarea').val(resultStr); --> input, textarea는 val()을 사용해야한다.
<데이터 전송, 서버에서 객체 반환>
유저 번호 보내서 해당 유저 정보 가져오기
유저번호: <input type="text" id="userNo">
<button id="getB">정보 가져오기</button>
<p class="test" id="p"></p>
<textarea class="test" id="textarea" rows="5" cols="40"></textarea>
<script>
$('#getB').click(function(){
var userNo = $('#userNo').val();
$.ajax({
url:'jQuery.do',
data:{userNo:userNo},
dataType: 'json',//제이슨 데이터타입을 작성해주는 것을 권장
success: function(data){//data(object) 안에 key가 있다. key=userNation, userNo, userName
console.log(data);//String이라 활용하기 어려움
var resultStr = "";
if(resultStr != null){
resultStr = data.userNo + ", " + data.userName + ", " + data.userNation;
} else {
resultStr = "해당 회원이 없습니다.";
}
$('#p3').text(resultStr);
$('#teatarea').val(resultStr);//input, textarea는 val() 사용.
},
error: function(data){
console.log(data);
}
});
});
</script>@WebServlet("/jQuery5.do")
public class JQueryAjaxServlet5 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<User> userList = new ArrayList<User>();
userList.add(new User(1, "강건강", "대한민국"));
userList.add(new User(2, "타일러 라쉬", "미국"));
userList.add(new User(3, "쯔위", "중국"));
userList.add(new User(4, "모모", "일본"));
userList.add(new User(5, "리사", "태국"));
userList.add(new User(6, "알베르토 몬디", "이탈리아"));
userList.add(new User(7, "조나단", "콩고"));
//원래 디비에 갔다와야되는데 일단 그런 효과만 주기위해 작성한 것이다.
int userNo = Integer.parseInt(request.getParameter("userNo"));
User user = null;
for(int i = 0; i < userList.size(); i++) {
if(userList.get(i).getUserNo() == userNo) {
user = userList.get(i);
}
}
JSONObject userObj = null;
if(user != null) {//해당 유저번호가 있을때
userObj = new JSONObject();//JSONObject() Map형식이라 put 사용
userObj.put("userNo", user.getUserNo());//키,벨류로 다 옮겨적음
userObj.put("userName", user.getUserName());
userObj.put("userNation", user.getUserNation());
}
// response.setCharacterEncoding("UTF-8");
response.setContentType("application/json; charset=UTF-8");//제이슨방식+인코딩 문제점을 한번에 해결
PrintWriter pw = response.getWriter();
pw.print(userObj);//스트링으로 넘어가서 활용하기 좋지 않은 방법이다.User [userNo=6, userName=알베르토 몬디, userNation=이탈리아]
}
<서버로 기본 값 전송, 서버에서 리스트 객체 반환>
유저 번호 전송 -> 해당 유저가 있는 경우 유저 정보, 없는 경우 전체 가져오기
유저 번호 : <input type="text" id="userNo2">
<button id="getUserInfoBtn2">정보 가져오기</button>
<p class="test" id = "p4"></p>
<textarea rows="5" cols="40" class="test" id="textarea4"></textarea>
<script>
$('#getUserInfoBtn2').click(function(){
$.ajax({
url: 'jQuery6.do',
data: {userNo:$('#userNo2').val()},
success: function(data){
console.log(data);//객체배열 , 없는 유저번호를 찍으면 객체배열
//JSONObject 중첩
// var result = "";
// for(var i in data){//data:객체 i:객체의 키 (벼열이라면 인덱스)
// if(typeof data[i] != 'object'){//타입이 오브젝트인지 아닌지 나눠준다.//키값이 쭉 나오기때문에
// result = data.userNo + ", " + data.userName + ", " + data.userNation;
// } else{//객체의 오브젝트
// // result += data[i].userNo + ', ' + data[i].userName + ', ' + data[i].userNation + "<br>";//p태그 버전
// result += data[i].userNo + ', ' + data[i].userName + ', ' + data[i].userNation + "\n";//textarea 버전
// }//이어서 들어가니까 꼭 +=를 사용한다
// }
// // $('#p4').html(result);//br을 텍스트로 인지해서 .html로 해준다.
// $('#textarea4').val(result);//textarea 버전
////JSONArray 사용 (ArrayList와 비슷)
var result = "";
for(var i in data){//i:인덱스
// result += data[i].userNo + ", " + data[i].userName + ", " + data[i].userNation + "<br>";//p
result += data[i].userNo + ", " + data[i].userName + ", " + data[i].userNation + "\n";//textarea
}
$('#p4').html(result);
$('#textarea4').val(result);
},
error: function(data){
console.log(data);
}
});
});
</script>@WebServlet("/jQuery6.do")
public class JQueryAjaxServlet6 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ArrayList<User> userList = new ArrayList<User>();
userList.add(new User(1, "강건강", "대한민국"));
userList.add(new User(2, "타일러 라쉬", "미국"));
userList.add(new User(3, "쯔위", "중국"));
userList.add(new User(4, "모모", "일본"));
userList.add(new User(5, "리사", "태국"));
userList.add(new User(6, "알베르토 몬디", "이탈리아"));
userList.add(new User(7, "조나단", "콩고"));
//원래 디비에 갔다와야되는데 일단 그런 효과만 주기위해 작성한 것이다.
int userNo = Integer.parseInt(request.getParameter("userNo"));
User user = null;
for(int i = 0; i < userList.size(); i++) {//없으면 다 출력, 있으면 그 유저정보만 출력
if(userList.get(i).getUserNo() == userNo) {
user = userList.get(i);
}
}
//JSONObject 중첩
// JSONObject userObj = new JSONObject();
// if(user != null) {
// //user 1개 => 해당 user 전송
// userObj.put("userNo", user.getUserNo());//키,벨류로 다 옮겨적음
// userObj.put("userName", user.getUserName());
// userObj.put("userNation", user.getUserNation());
// } else {
// //user null => 전체 user 전송
// for(int i = 0; i < userList.size(); i++) {
// JSONObject obj = new JSONObject();
// obj.put("userNo", userList.get(i).getUserNo());//키,벨류로 다 옮겨적음
// obj.put("userName", userList.get(i).getUserName());
// obj.put("userNation", userList.get(i).getUserNation());
//
// userObj.put(i, obj);
// }
// }
//JSONArray 사용 (ArrayList와 비슷)
//순서를 유지하면서 여러개를 담을 수 있다.
JSONArray userArr = new JSONArray();
JSONObject userObj = null;
if(user != null) {
userObj = new JSONObject();
userObj.put("userNo", user.getUserNo());
userObj.put("userName", user.getUserName());
userObj.put("userNation", user.getUserNation());
userArr.add(userObj); //else일때 여러개를 담을 수 있게 이렇게 설정한다
} else {
for(User userInfo : userList) {
userObj = new JSONObject();
userObj.put("userNo", userInfo.getUserNo());
userObj.put("userName", userInfo.getUserName());
userObj.put("userNation", userInfo.getUserNation());
userArr.add(userObj);
}
}
response.setContentType("application/json; charset=UTF-8");
// response.getWriter().print(userObj);
response.getWriter().print(userArr);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}