네티즌칼럼

Total article 1115 : 1 page / total 45 page

[1115]

일반 (392)

블록 (81)

코딩 (27)

Subject :

[코딩] [강추] JQuery 를 사용해 버튼을 여러개 클릭해 종류별로 폼 값 전달 후 처리해 비동기로 데이터 가져오기...

(Homepage) \| Point : 66114 \| 2015-03-09 09:52:20 \| Read : 3,931 \| Vote : 70

- SiteLink #1 : http://www.lennu.net/jquery-ajax-example-with-json-response/

커스텀화된 html 출력을 위한 json 타입을 사용했습니다.<br><br>

[POST 방식- json3.html]
<pre class="brush: js; first-line: 1" title="json3.html">
&lt;!DOCTYPE html> 
&lt;html>
&lt;head>
&lt;title>jQuery Ajax Example with JSON Response&lt;/title>
&lt;script src="https://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js" type="text/javascript">&lt;/script>
&lt;!-- 여기에 자바스크립트 코드를 기술한다 -->
&lt;script type="text/javascript">
$(document).ready(function(){
	$(':button').on('click', function() { // 이것은 버튼이 클릭됐을 때 발생하는 이벤트
		var button = $(this).val();
		$.ajax({ // ajax 호출 시작
			type: "POST",
			url: "https://www.blrun.net/eight/study/serverside.php", // JQuery가 serverside.php를 로드함
			dataType: "json", // JSON datatype을 설정
			data: {"button":escape($(this).val())} // 클릭된 버튼의 값을 보내준다
		})
		.done(function(data) { // 변수 data는 서버사이드로부터 받은 데이타를 담고 있다.
			$('#wines').html(''); // #wines div 값을 초기화 한다.
			if (button == '모든') { // 클릭된 버튼이 all 이라면 모든 와인을 표시해 준다.
				for (var i in data.red) {
					$('#wines').append('Red wine: ' + data.red[i] + '&lt;br/>');
				}
				for (var i in data.white) {
					$('#wines').append('White wine: ' + data.white[i] + '&lt;br/>');
				}
			}
			else if (button == '빨강') { // 클릭된 버튼이 red 라면 빨간 와인을 표시해 준다.
				for (var i in data.red) {
					$('#wines').append('Red wine: ' + data.red[i] + '&lt;br/>');
				}
			}
			else if (button == '흰색') { // 클릭된 버튼이 white 라면 흰색 와인을 표시해 준다.
				for (var i in data.white) {
					$('#wines').append('White wine: ' + data.white[i] + '&lt;br/>');
				}
			}
		});
		return false; // 페이지가 리프레쉬되지 않게 유지해 준다. 
	});
});
&lt;/script>
&lt;/head>
&lt;body>
&lt;form method="post" action="">
	&lt;button value="모든" type="button">모든 와인들을 가져온다!&lt;/button>
	&lt;button value="빨강" type="button">빨간 와인들을 가져온다!&lt;/button>
	&lt;button value="흰색" type="button">흰색 와인들을 가져온다!&lt;/button>
&lt;/form>
&lt;div id="wines">
&lt;!-- 현재 페이지에서 작업을 끝마쳤을 때 Javascript가 여기에 data를 프린트할 것이다. -->
&lt;h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!&lt;/h2>
&lt;/div>
&lt;/body>
&lt;/html>

</pre>
<br><br>
[서버측: serverside.php]
<pre class="brush: php; html_script: true; first-line: 1" title="serverside.php">
&lt;?php
header("Content-Type: application/javascript; charset=utf-8");

// 클릭된 버튼의 값을 가져온다.
$button = $_POST['button'];

// 빨간색, 흰색 와인 테이블
$red = array('Chianti(치안티)', 'Barolo(바롤로)', 'Pinot Noir(피놋 노이르)');
$white = array('Chardonnay(차돈네이)', 'Cava(카바)', 'Chablis(채블리스)');

// 흰색과 빨간색 테이블을 하나의 다중배열 테이블로 결합한다.
$winetable = array(
	"red" => $red,
	"white" => $white
);

// 마지막으로 버튼값에 따라 와인테이블을 JSON 인코딩을 해주고 그것을 출력한다.
if ($button == "빨강") {
	print json_encode($red);
}
else if ($button == "흰색") {
	print json_encode($white);
}
else {
	print json_encode($winetable);
}
?>
</pre>
<br><br>
[실제동작 - POST 방식]<br>
<!DOCTYPE html> 
<html>
<head>
<title>jQuery Ajax Example with JSON Response</title>

<script type="text/javascript">
$(document).ready(function(){
	$(':button').on('click', function() { // 이것은 버튼이 클릭됐을 때 발생하는 이벤트
		var button = $(this).val();
		$.ajax({ // ajax 호출 시작
			type: "POST",
			url: "https://www.blrun.net/eight/study/serverside.php", // JQuery가 serverside.php를 로드함
			dataType: "json", // JSON datatype을 설정
			data: {"button":escape($(this).val())} // 클릭된 버튼의 값을 보내준다
		})
		.done(function(data) { // 변수 data는 서버사이드로부터 받은 데이타를 담고 있다.
			$('#wines').html(''); // #wines div 값을 초기화 한다.
			if (button == '모든') { // 클릭된 버튼이 all 이라면 모든 와인을 표시해 준다.
				for (var i in data.red) {
					$('#wines').append('Red wine: ' + data.red[i] + '<br/>');
				}
				for (var i in data.white) {
					$('#wines').append('White wine: ' + data.white[i] + '<br/>');
				}
			}
			else if (button == '빨강') { // 클릭된 버튼이 red 라면 빨간 와인을 표시해 준다.
				for (var i in data.red) {
					$('#wines').append('Red wine: ' + data.red[i] + '<br/>');
				}
			}
			else if (button == '흰색') { // 클릭된 버튼이 white 라면 흰색 와인을 표시해 준다.
				for (var i in data.white) {
					$('#wines').append('White wine: ' + data.white[i] + '<br/>');
				}
			}
		});
		return false; // 페이지가 리프레쉬되지 않게 유지해 준다. 
	});
});
</script>
</head>
<body>
<form method="post" action="">
	<button value="모든" type="button">모든 와인들을 가져온다!</button>
	<button value="빨강" type="button">빨간 와인들을 가져온다!</button>
	<button value="흰색" type="button">흰색 와인들을 가져온다!</button>
</form>
<div id="wines">

<h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2>
</div>
</body>
</html>

* 관리자님에 의해서 게시물이 이동되었습니다 (2015-06-06 14:25)

18.191.254.106

http://run.blrun.net/
http://www.ntzn.net/
http://www.blrun.net/eight
http://삼성산뜨란채.kr

[HOME]

[bitly]