티스토리 뷰
[JSP] preventDefault,stopPropagation,$.param(),폼태그전송방식,serialize(),serializeArray()
찰떡쿠키부스트 2017. 12. 1. 15:48
# preventDefault 메서드 : 기본 이벤트를 제거한다.
[ex]
<script>
$(document).ready(function(){
$("a").click(function(e){
$("#b1").css("backgroundColor","blue");
e.preventDefault(); //링크 연결안됨(기본이벤트제거됨)
});
$("h1").click(function(){
$("#b2").css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<input type="button" id="b1">
<input type="button" id="b2">
<h1>
<a href="연결</a'>http://www.seoulit.co.kr">연결</a> //링크 연결안됨(기본이벤트제거됨)
</h1>
</body>
</html>
# stopPropagation 메서드 : 이벤트전달을 제거한다.
$(document).ready(function(){
$("a").click(function(e){
$("#b1").css("backgroundColor","blue");
e.stopPropagation(); //누른버튼만 색깔바뀌고 전달안됨
e.preventDefault();
});
$("h1").click(function(){
$("#b2").css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<input type="button" id="b1">
<input type="button" id="b2">
<h1>
<a href="연결</a'>http://www.seoulit.co.kr">연결</a>
</h1>
</body>
</html>
# $.param()
$(document).ready(function(){
var data={
name:"Sue",gender:"Man",part:"guitar"
};
$("body").append("<div>"+$.param(data)+"</div>"); //파라미터를 얻어올수있음
});
</script>
</head>
<body>
</body>
</html>
# 폼태그전송방식
$(document).ready(function(){
$("#my_form").submit(function(event){
var data={
"name":$("#name").val(),
"age":$("#age").val()
}
$("#divTag").load("t2.jsp",$.param(data));
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="my_form">
이름:<input type="text" id="name">
나이:<input type="text" id="age">
<input type="submit">
</form>
<div id="divTag"></div>
</body>
</html>
# serialize()
:입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.
$(document).ready(function(){
$("#my_form").submit(function(event){
alert($(this).serialize());
$("#divTag").load("t2.jsp",$(this).serialize());
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="my_form">
이름:<input type="text" name="name">
나이:<input type="text" name="age">
<input type="submit" >
</form>
<div id="divTag"></div>
</body>
</html>
# serializeArray()
$(document).ready(function(){
$("#my_form").submit(function(event){
$("#divTag").load("t2.jsp",$(this).serializeArray());
var str="";
for(var index in $(this).serializeArray()){
str+="<div>";
for(var key in $(this).serializeArray()[index]){
str+=key+":";
str+=$(this).serializeArray()[index][key];
str+=",";
}
str+="</div>";
}
$("#divTag2").html(str);
event.preventDefault();
});
});
</script>
</head>
<body>
<form id="my_form">
이름:<input type="text" name="name">
나이:<input type="text" name="age">
<input type="submit" >
</form>
<div id="divTag"></div>
<div id="divTag2"></div>
</body>
</html>
'VIEW > JSP&SERVLET' 카테고리의 다른 글
| [JSP] JSTL (0) | 2017.12.01 |
|---|---|
| [JSP] <jsp:useBean>,Cookie,EL (0) | 2017.12.01 |
| [JSP] jqgrid (0) | 2017.12.01 |
| [JSP] Servlet (0) | 2017.12.01 |
| [JSP] json,$.ajax() (0) | 2017.12.01 |