view์์ controller๋ก ๋ฐ์ดํฐ ๋ณด๋ด๊ธฐ
1. ์ปจํธ๋กค๋ฌ์์ JSP๋ก ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ
view
์คํฌ๋ฆฝํ๋ฆฟ๊ณผ elํ๊ทธ ์ฌ์ฉ ๊ฐ๋ฅ.
<%
MyClass cls = (MyClass)request.getAttribute("mycls");
%>
๋ฒํธ : <%=cls.getNumber() %> <br>
์ด๋ฆ : <%=cls.getName() %> <br>
<br>
number : ${mycls.number } <br>
name : ${mycls.name } <br>
controller
model์ ์ฌ์ฉํ์ฌ ๋ฐ์ดํฐ ์ ๋ฌ
@RequestMapping(value = "hello.do", method = RequestMethod.GET)
public String hello(Model model) {
logger.info("HelloController hello() " + new Date());
MyClass cls = new MyClass(1001, "ํ๊ธธ๋");
model.addAttribute("mycls", cls);
return "hello";
}
2. form ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ post ๋ฐฉ์ ์ ๋ฌ
view
<form action="move.do" method="post">
๋ฒํธ:<input type="text" name="number"><br>
์ด๋ฆ:<input type="text" name="name"><br><br>
<input type="submit" value="์ด๋"><br>
</form>
controller
*** get๋ฐฉ์๊ณผ post๋ฐฉ์์ ๋ชจ๋ ๋ฐ์ผ๋ ค๋ฉด method ๋ถ๋ถ์ ๋ ๋ค ๊ธฐ์ ํ๋ค.
@RequestMapping(value = "move.do", method = { RequestMethod.GET, RequestMethod.POST })
//method = { RequestMethod.GET, RequestMethod.POST } : get๋ฐฉ์๊ณผ post๋ฐฉ์์ ๋ชจ๋ ๋ฐ๋๋ค public String move(Model model, MyClass mycls) {
logger.info("HelloController move() " + new Date());
System.out.println(mycls.toString());
model.addAttribute("mycls", mycls);
return "hello";
}
3. AJax๋ฅผ ์ฌ์ฉํ ๋น๋๊ธฐ ์ฒ๋ฆฌ
view
์์ด๋:<input type="text" id="checkid"><br>
<button type="button" onclick="idcheck()">์์ด๋์ฒดํฌ</button>
<script type="text/javascript">
function idcheck() {
$.ajax ({
url:"idcheck.do",
type:"get",
// data:"id=" + $('#checkid').val(), ์ด๋ ๊ฒ๋ ์ธ ์ ์์ง๋ง ์๋์ ๊ฐ์ JSON ํ์์ด ํธํ๋ค.
data:{
id:$('#checkid').val()
},
success:function(data) {
//alert('success');
alert(data); // '์ค์ผ์ด' ๋์ด์จ๋ค.
},
error:function(){
alert('error');
}
});
}
</script>
controller
return๊ฐ์ view ์ด๋ฆ์ผ๋ก ์ฌ์ฉํ์๋ค๋ฉด, ajax ์ฌ์ฉ์์๋ ๋ฐ์ดํฐ๊ฐ์ ๋๊ฒจ์ค์ผ ํ๋ฏ๋ก
@ResponseBody๋ผ๋ ์ด๋ ธํ ์ด์ ์ ์ถ๊ฐํด์ค๋ค.
๋ง์ฝ ํ๊ธ๋ก ๋ ๋ฐ์ดํฐ๋ฅผ ๋๊ฒจ์ค๋ค๋ฉด @RequestMapping ํ๋กํผํฐ์
produces = "application/String; charset=utf-8"๋ฅผ ์ถ๊ฐํ๋ค.
@ResponseBody // Ajax ์ฌ์ฉ์์ ๋ฐ๋์ ๋ถ์ฌ์ฃผ๋ ์ด๋
ธํ
์ด์
@RequestMapping(value = "idcheck.do", method = { RequestMethod.GET, RequestMethod.POST }, produces = "application/String; charset=utf-8")
//produces = "application/String; charset=utf-8" : utf-8 ํ์์ผ๋ก ๋ณด๋ธ๋ค. (ํ๊ธ ๊นจ์ง ๋ฐฉ์ง)
public String idcheck(String id) {
logger.info("HelloController idcheck() " + new Date());
System.out.println("id : " + id);
String str = "์ค์ผ์ด";
return str; // Ajax์ ๋ฆฌํด๊ฐ์ ํ์ด์ง ์ด๋์ด ์๋๋ค.
}
4. AJax + JSON (map ํ์)
view
์ ๋ ฅ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ JSON ํ์์ผ๋ก ๋ง๋ ๋ค. ( human)
์ปจํธ๋กค๋ฌ์์ ๋ฐ์ HashMap๊ฐ์ JSON.stringify()๋ฅผ ์ฌ์ฉํ์ฌ String์ผ๋ก ๋ณํํ๋ค.
์ด๋ฆ:<input type="text" id="name" value="ํ๊ธธ๋"><br>
์ ํ:<input type="text" id="phone" value="123-4567"><br>
์ด๋ฉ์ผ:<input type="text" id="email" value="egf@naver.com"><br>
์๋
์์ผ:<input type="text" id="birth" value="2001/02/03"><br>
<button type="button" id="account">ํ์๊ฐ์
</button>
<br>
<br>
<script type="text/javascript">
$('#account').click(function() {
//alert('click');
let human = {
name:$('#name').val(),
phone:$('#phone').val(),
email:$('#email').val(),
birth:$('#birth').val()
}; // JSON ํ์์ผ๋ก ๋ฐ์์ค
$.ajax({
url:"./account.do",
type:"post",
dataType:'json',
data:human,
async:true,
success:function(data){
alert(JSON.stringify(data)); //map ํ์์ JSON ํ์์ผ๋ก ๋ฐ์์จ๋ค.
},
error:function(){
alert('error');
}
});
})
</script>
controller
view์์ ๋๊ฒจ์จ JSON ํค ๊ฐ๊ณผ Human(dto)์ ๋ณ์์ด๋ฆ์ด ์ผ์นํ๋ฉด,
๋งค๊ฐ๋ณ์๋ฅผ dto๋ก ๋ฐ์๋ณด๋ฉด ๋ฐ๋ก ๊ฐ์ด ๋ค์ด๊ฐ๋ค. (์ ์์๋์)
HashMap์ ํ์๋ key:value ์ด๊ธฐ ๋๋ฌธ์ HashMap์ ์ฌ์ฉํ์ฌ ์ปจํธ๋กค๋ฌ์์๋ JSON ํ์์ผ๋ก ๋ณด๋ผ ์ ์๋ค.
@ResponseBody
@RequestMapping(value = "account.do", method = { RequestMethod.GET, RequestMethod.POST })
public Map<String, Object> account(Human h) {
logger.info("HelloController account() " + new Date());
System.out.println(h.toString());
Map<String, Object> map = new HashMap<String, Object>();
map.put("message", "๋ด๊ฐ ๋ณด๋ธ ๋ฉ์์ง์
๋๋ค.");
map.put("name", "์ฑ์ถํฅ");
return map;
}
Human.java (DTO)
package bit.com.a.dto;
import java.io.Serializable;
public class Human implements Serializable{
private String name;
private String phone;
private String email;
private String birth;
public Human() {
// TODO Auto-generated constructor stub
}
public Human(String name, String phone, String email, String birth) {
super();
this.name = name;
this.phone = phone;
this.email = email;
this.birth = birth;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getBirth() {
return birth;
}
public void setBirth(String birth) {
this.birth = birth;
}
@Override
public String toString() {
return "Human [name=" + name + ", phone=" + phone + ", email=" + email + ", birth=" + birth + "]";
}
}
5. Ajax + JSON (list ํ์)
view
listํ์๋ JSON์ผ๋ก ๊ฐ์ ธ์ฌ ์ ์๋๋ฐ, $.each()๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋ ๋ฐ์ดํฐ์ ์ ๊ทผํ๊ฑฐ๋,
data[1].name๊ณผ ๊ฐ์ด ๋ฐฐ์ด ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๊ทผํ ์ ์๋ค.
<div id="datas">
</div>
<button type="button" onclick="read()">data read</button>
<script type="text/javascript">
function read() {
$.ajax({
url:"read.do",
type:"get",
success:function(data){
//alert(JSON.stringify(data));
//$('#datas').text(JSON.stringify(data)); //DTOํ์ list๋ฅผ JSONํ์์ผ๋ก ๋ฐ์์จ๋ค.
//alert(data[1].name);
let str = '';
$.each(data, function (i, item) {
str += (i+1) + " ";
str += item.number +" ";
str += item.name +"<br>";
});
$('#datas').html(str);
},
error:function(){
alert('error');
}
});
}
</script>
controller
@ResponseBody
@RequestMapping(value = "read.do", method = { RequestMethod.GET, RequestMethod.POST })
public List<MyClass> read() {
logger.info("HelloController read() " + new Date());
//List<String> list = new ArrayList<String>();
//list.add("ํ๋");
//list.add("๋");
List<MyClass> list = new ArrayList<MyClass>();
list.add(new MyClass(123,"ํ๊ธธ๋"));
list.add(new MyClass(456,"์ผ์ง๋งค"));
return list;
}
'๐ป ๊ฐ๋ฐ > ๐ TIL (Today I Learned)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ajax ํ์ฉ ์บ๋ฆฐ๋ ๋ง๋ค๊ธฐ (0) | 2021.04.21 |
---|---|
21.04.16 TIL(D+67 Spring AOP ,Tiles) (0) | 2021.04.16 |
21.04.13 TIL (D+64 MyBatis, Spring) (0) | 2021.04.13 |
21.04.12 TIL (D+63 Spring) (0) | 2021.04.12 |
210323 TIL(JSP EL ํ๊ทธ, JSTL ํ๊ทธ, JSP Action ํ๊ทธ) (0) | 2021.03.23 |