서버에서 클라이언트에게 데이터 전송하기
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(){
$.ajax({
url : "ajax4.jsp",
success:function(){alert("데이터받기성공");},
error:function(){alert("서버오류");}
});
});
});
</script>
</head>
<body>
<input type="button" value="AJAX"/>input 을 클릭하면 ajax가 실행됩니다. url에 적혀 있는 ajax4.jsp 에 가서
데이터를 받아오는데 성공하면 데이터받기성공, 오류가 발생하면 서버오류가 alert 됩니다.
특징1. 화면의 바뀜없이 실행됩니다
<script>
$(document).ready(function(){
$("input").click(function(){
$.ajax({
url : "ajax4.jsp",
success:function(str){alert(str);}, //성공하면 ajax4.jsp 의 모든 로직들을 가져오다.
error:function(){alert("서버오류");}
});
});
});
</script>
</head>
<body>
<input type="button" value="AJAX"/>근데 굳이html 소스 코드를 가져올 필요 없으니, 결과 값만 가져오도록하자,
자바 로직 두고 HTML 전부지우고 aaa만 하면, aaa 가 alert창으로 나오다
<script>
$(document).ready(function(){
$("#bTn").click(function(){
$.ajax({
url:"ajax2.jsp?id="+$("#id").val(),
success:function(str){alert(str);},
error:function(){alert("이미 사용중인 ID 입니다");}
});
});
});
</script>
<form>
<h1>ID 중복체크</h1>
ID : <input type="text" id="id"/>
<input type="button" id="bTn" value="ID중복체크"/>
</form>
ajax2.jsp 에는 db연동해서 selectMember(id) 로 한 회원의 데이터를 받을 수 있는 로직이 있슴돠
ajax2.jsp 하면 id 는 날라가지 않아서 id붙이고 $("#id").val()로 text받스에 입력한 값을 넘깁니다.
<body>
<%
String id = request.getParameter("id");
MemberBean bean = MemberDAOImpl.getInstance().selectMember(id);
Map<String,Object> map = new HashMap<>();
map.put("member",bean);
JSONObject jsonobj = JSONObject.fromObject(map);
out.print(jsonobj);
%>
</body>id를 서버에 넘기고 해당 id의 정보를 받아 map 에 넣습니다, 키값 member 에 가져온 회원 정보(현재 주소값)를 jsonObject에 넣으면, 주소가 값으로 나옵니다~
<body>
<%
String id = request.getParameter("id");
List<MemberBean> bean = MemberDAOImpl.getInstance().selectMemberList();
Map<String,Object> map = new HashMap<>();
map.put("member",bean);
JSONObject jsonobj = JSONObject.fromObject(map);
out.print(jsonobj);
%>
</body>데이터 서버에 있는 모든 회원의 정보를 불러옵니다~
fromObject()인자는 Object인데 키와 값이 있어야 jsonObject 로 만들 수 있다
<script>
$(document).ready(function(){
$("#btnTag").click(function(){
$.ajax({
url:"member.jsp",
data:{id:$("#idTxt").val()}, //id를 날리는 방법
success:function(str){alert(str);},
error:function(){alert("에러발생");}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="btnTag" value="회원정보보기">
</body>member.jsp 에서 공백도 같이 가져왔는데 trimDirectiveWhitespaces="true"이걸로 공백을 제거 해 줄수 있다. <%%> 에 넣기~
<script>
$(document).ready(function(){
$("#btnTag").click(function(){
$.ajax({
url:"member.jsp",
data:{id:$("#idTxt").val()},
dataType:"json", //받아온 데이터 str은 str인데 json으로 바꿔주겠다 입니다
success:function(str){
$("#resultTag").html(str.member.id);
}, //str.member.id 는 배열에서 사용가능합니다
error:function(){alert("에러발생");}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="btnTag" value="회원정보보기">
<div id="resultTag">
화면에 이쁘게 한 회원의 정보를 올려 볼게요
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){//.jsp 실행되면 읽어들입니다
$("#btnTag").click(function(){ //버튼 클릭하면 실행됩니다
$.ajax({
url:"member.jsp", //member.jsp 로 갑니다
data:{id:$("#idTxt").val()}, //id 가 idTxt에서 온 값을 id로 member.jsp에게 넘깁니다
dataType:"json", //받아온 데이터는 json형태로 바꿉니다
success:function(str){//받아오는게 성공이라면
var array =["id","pw","addr","tel"];
var buffer =[];
array.forEach(function(key){//배열에 있는 값만큼 실행
buffer.push(key.toUpperCase()+" : ");
buffer.push(str.member[key]+ "<br/>");//member[key]를 넣어 값을 반환받습니다
});
$("#resultTag").html(buffer.join(""));
},
error:function(){alert("에러발생");}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="btnTag" value="회원정보보기">
<div id="resultTag">$(document).ready(function(){
$("#buttonTag").click(function(){
$.ajax({
url:"list.jsp",
dataType:"json",
success:function(str){
var buffer =["<ol>"];
str.memberlist.forEach(function(member){//str은 배열이라 memberlist 로 접근하고 키값 만큼 forEach 로 돌린다
buffer.push("<li>");
buffer.push(member.id);
buffer.push("</li>");
});
buffer.push("</ol>");
$("#resultTag").html(buffer.join(""));
},
error:function(){alert("에러발생");}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="buttonTag" value="회원정보보기">
<div id="resultTag">
$.getJSON("ajax/test.json", function(data)){
var items =[];
$.each(data, function(key,val){
items.push("<li id='" + key + "'>" + val + "</li>");
});
$("<ul/>",{
"class" : "my-new-list",
html:items.join("")}).appendTo("body");
});
$(document).ready(function(){
$("#buttonTag").click(function(){
$.getJSON({
url:"list.jsp",
dataType:"json",
success:function(str){
var buffer =[];
str.memberlist.forEach(function(member){
buffer.push("<li>");
buffer.push(member.id);
buffer.push("</li>");
});
$("<ol/>",{"class":"my-new-list",
html:buffer.join("")
}).appendTo("#resultTag");
},
error:function(){alert("에러발생");}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="buttonTag" value="회원정보보기">
<div id="resultTag">
</div>getJSON 방식입니다~ ajax를 사용하든 getJSON사용하든 결과는 같아요, jquery.com 에서getJSON 방식을 다운 받아 볼 수 있어요
Json.parse()
const json='{"result" : true, "count":42}'
json은 string 입니다.
const obj = JSON.parse(json);
으로 하면 array-like 로 바뀝니다
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
$("#buttonTag").click(function(){
$.ajax({
url:"member.jsp",
data:{id:$("#idTxt").val()},
/* dataType:"json", */
success:function(str){
const arr = JSON.parse(str);//str은 string 이라서 array-like로 바꿨습니다.
$("#resultTag").html(arr.member.id);
},
error:function(a,b,c){alert(a+","+b+","+c);}
});
});
});
</script>
<body>
ID : <input type="text" id="idTxt"/>
<input type="button" id="buttonTag" value="회원정보보기">
<div id="resultTag"></div>클라이언트에서 서버로 json형태로 데이터 전송하기.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
$(document).ready(function(){
var str ={"member" : {"addr" : "addr4" , "id":"id4","pw":"pw4","tel":"tel4"}};
$("#textTag").val(str);
});
</script>
<body>
<form action="jsonTest7.jsp">
<input type="submit" value="회원한명의정보보내기" id="buttonTag"/>
<input type="text" name="senddata" id="textTag"/>
현재 str이 array-like 라서 데이터를 서버에 보낼 수 없습니다. 보낼려면 String 으로 바꿔줘야 합니다.
'' 외따옴표를 붙일수 있고, 또는 JSON.stringify()를 사용해서 String 으로 할 수 있습니다.
<script>
$(document).ready(function(){
var str={"member":{"id":"","pw":""}};
str.member.id="aa";
str.member.pw="bb";
$("#textTag").val(JSON.stringify(str));
});
</script>
<body>
<form action="jsonTest7.jsp">
<input type="submit" value="회원한명의정보보내기" id="buttonTag"/>
<input type="text" name="senddata" id="textTag"/>
</form>지금 str은 배열이라 날릴 수 없습니다. string 으로 바꾸기 위해서 JSON.stringify()를 사용해서 String 으로 만들어 줍니다
<%
String arr = request.getParameter("senddata");
JSONObject obj=JSONObject.fromObject(arr);
JSONObject jobj=(JSONObject)obj.get("member"); //JSONObject형이다
MemberBean member = new MemberBean();
MemberDAOImpl.getInstance().insertMember(member);
%>받은 arr 은 string 인 jsonobject 입니다.
다시 jsonObject 로 바꾸려 fromObject 메소드를 사용했습니다. obj는 이제 formObject 입니다, Json은 부모가 map 이기 때문에 get, put 메소드를 사용할 수 있습니다. member 키를 넣어 내용을 jobj 에 넣습니다. jobj 는 jsonObject 입니다
회원 한명이 데이터를 넘겨주는 상황은 "회원가입" 상황입니다, MemberBean 객체를 생성해서 MemberDAOImpl 에 접근하고 데이터 베이스에 넣으려는데, 현재상황에선 setter 를 해주지 않아, 빈 겁데기만 넣는것입니다
<%
String arr = request.getParameter("senddata");
JSONObject obj=JSONObject.fromObject(arr);
JSONObject jobj=(JSONObject)obj.get("member"); //JSONObject형이다
MemberBean member =(MemberBean)JSONObject.toBean(jobj,MemberBean.class);
MemberDAOImpl.getInstance().insertMember(member);
%>
<%=member.getId() %><br/>
<%=member.getPw() %><br/>toBean(JSONOBject object, class beanClass)
이렇게 하면 toBean이 알아서 jobj 의 키값을 MemberBean 에 setter를 해줍니다.
너무나 편리하죠~~
건물주가 되는 그날까지