test5.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String cp = request.getContextPath();%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=cp %>/data/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//var tt=$("#tt").val().trim(); // 크롬에서만 먹힘 익스 안됨
var tt=$("#tt").val();
tt=$.trim(tt);
if(!tt){
alert("값을 입력 하세요!!!");
$("#tt").focus();
retrun;
}
var url="test5_ok.jsp?tt="+tt+"&cc=korea";
// load - AJAX (get 방식),responeseText
$("#dd").load(url);
});
$("#btn2").click(function(){
var a=$("#tt").val();
//AJAX(get 방식),responeseText
var url="test5_ok.jsp";
$.get(url,{tt:a, cc:"korea"}, function(args){
$("#dd").html(args);
});
});
$("#btn3").click(function(){
var a=$("#tt").val();
//AJAX(post 방식),responeseText
var url="test5_ok.jsp";
$.post(url,{tt:a, cc:"korea"}, function(args){
$("#dd").html(args);
});
});
$("#btn4").click(function(){
var a=$("#tt").val();
var params="tt="+a+"&cc=seoul"; //서버에 보낼데이터
var url="test5_ok.jsp"; //보낼 주소
//AJAX(post 방식),responeseText
$.ajax({
type:"post" // post 방식
,url:url // 보낼 주소
,data:params // 보낼 데이터
,success:function(args){ // 전송성공시 실행될 함수
$("#dd").html(args); // 해당 주소로 보내져서 요청이 처리된 결과를 Id가 dd인 놈에게 출력시킨다.
}
,beforeSend:showRequest //서버로 전송하기 전에 실행하는 함수
,error:function(e){
alert(e.responseText);
}
});
});
});
function showRequest(){
if(! $("#tt").val()){
alert("내용을 입력하세요 !!!");
return false; //서버로 전송하지 않음.
}
return true; //서버로 전송
}
//외부의 스크립트를 불러와서 추가함( getScript() )
$(function(){
$("#btn5").click(function(){
$.getScript("test.js");
});
});
</script>
</head>
<body>
<input type="text" id="tt"/>
<input type="button" value="확인1" id="btn1"><br/>
<input type="button" value="확인2" id="btn2"><br/>
<input type="button" value="확인3" id="btn3"><br/>
<input type="button" value="확인4" id="btn4"><br/>
<input type="button" value="확인5" id="btn5"><br/>
<div id="dd"></div>
</body>
</html>
===============================================================================================================================================
test5_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String cp = request.getContextPath();
String tt=request.getParameter("tt");
String cc=request.getParameter("cc");
String msg=cc+"<br/>입력한 내용은 <font color='red'>"+tt+"</font> 입니다.";
%>
안녕하세요<br/>
<%=msg %>
'jquery' 카테고리의 다른 글
| 커서 손가락 바꾸기 (0) | 2013.09.09 |
|---|---|
| jquery & ajax 이해하는 간단한 예제 (2) | 2013.08.07 |
| jquery 기본예제(jquery가 제공하는 dialog와 달력, 탭 tabs) (0) | 2013.08.07 |
| jquery 기본예제(동적으로 추가된 이벤트 처리할때 on) (0) | 2013.08.07 |
| jquery 예제 (0) | 2013.08.07 |