네티즌칼럼(여러분이 쓰는 칼럼입니다)


Total article 943  / total 48 page  Modify  Memo  Logout  Admin  
  [943]   일반 (278)  댓글 (574)  블록 (69)  코딩 (22)
    Subject : [코딩] [강추] JQuery 를 사용해 버튼을 여러개 클릭해 종류별로 폼 값 전달 후 처리해 비동기로 데이터 가져오기...
(Homepage)  | Point : 17969 |  2015-03-09 09:52:20 |  Read : 270 |  Vote : 3
- SiteLink #1 : http://www.lennu.net/jquery-ajax-example-with-json-response/


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

[POST 방식- json3.html] 
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax Example with JSON Response</title>
<script src="http://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<!-- 여기에 자바스크립트 코드를 기술한다 -->
<script type="text/javascript">
$(document).ready(function(){
	$(':button').on('click', function() { // 이것은 버튼이 클릭됐을 때 발생하는 이벤트
		var button = $(this).val();
		$.ajax({ // ajax 호출 시작
			type: "POST",
			url: "http://www.blrun.net/eight/php/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">
<!-- 현재 페이지에서 작업을 끝마쳤을 때 Javascript가 여기에 data를 프린트할 것이다. -->
<h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2>
</div>
</body>
</html>


[서버측: serverside.php] 
<?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);
}
?>


[실제동작 - POST 방식]
jQuery Ajax Example with JSON Response

AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!

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


IP Address : 116.37.220.134 
http://www.ntzn.net/



Upload #1 Upload #2

미리보기  그림창고  코드삽입
  [HOME]  [bitly]



2015/02/19 16 2317
제가 요새 네티즌 칼럼에 SSL 보안서버 적용을 했는데요. 이게 XP까지만 지원하고 윈도우98 컴은 지원을 하지 않습니다. 윈도우98 이하 컴에서 로그인이 안되시는 분들은 보안접속 체크박스를 해제 후 연결하시면 정상적으로 이용가능하다는 말씀 전합니다. 모든 정보수정이나 개인정보 수정에 관련된 페이지들은 다 이런 식으로 하시면 됩니다. 그리고 보안접속은 로그인 아이디와 비번을 암호화하여 전송하기 때문에 동일 네트
 17969
 05:55:14
2014/02/08 767 9906
크롬에서 [설정] > [확장프로그램] > [더 많은 확장 프로그램 다운로드] 로 들어간 뒤 검색어에다 'rss' 를 치면 아래와 같은 그림이 나오는데 거기서 구글에서 제공하는 RSS 구독 확장 프로그램을 설치하면 됩니다. 쉽죠? 이렇게 쉬운 걸 저도 여태까지 모르고 있었답니다. ^^; 스윙브라우저도 똑같이 적용하면 될 것 같습니다.
 17969
 10:34:11
2013/10/04 783 12129
이게 크롬 29 버젼 대에서 30.0.1599.69 버젼으로 업데이트가 되더니 이런 현상이 생겨 버렸네요. 아래 링크를 클릭해서 [쓰레기통] 이나 [광고게시판] 사진에 마우스를 오버해 보시면 아시겠지만 원래 이미지 미리보기가 바로 옆에 출력이 돼야 하는데 이게 버젼 업이 되면서 상단에 붙어 버렸습니다. 파이어팍스에서도 이런 현상이 있고 IE에선 이런 현상이 없는데 이번에 크롬이 업되면서 파폭과 증상이 똑같아져 버렸습니다.
 17969
 16:28:26
2013/08/29 794 10988
제가 사용하는 스마트폰을 바라보시면서 자기꺼하고 똑같다고 해서 봤더니 같은 VEGA인데 같은 회사 뒷면이 약간 다른 모델이더라구요. 저한테 스마트폰 요금이 얼마 나오냐 자기 열차표 좀 봐달라며 잡다하게 말을 걸어오면서 종국에 하시는 말씀이 자기는 포크레인 운전하면서 스마트폰 사용하다가 차가 뒤집어지는 바람에 큰 사고 났다면서 배를 보여주시며 치료 받았다고 하시는 겁니다. "정말 큰일 날 뻔 하셨네요" 하고 저
 17969
 16:54:50
2012/09/24 782 17614
안드로이드 4.0.4 버젼 내 기본 브라우저는 문제가 있고 크롬 브라우저는 스크롤 멈춤 현상은 없는데 덩치가 엄청나게 크고 한글이 제대로 입력이 안되는 문제가 있습니다. 근데 플레이스토어에서 다운받을 수 있는 오페라 브라우저는 한글도 입력이 잘되고 게시판 목록에서 스크롤이 멈추는 현상이 적습니다. 이곳에 찾아오시는 분들은 참고하시기 바랍니다. 안드로이드 4.0.4 버젼에서 테스트 했습니다. 현재 오페라는 첫번째
 17969
 22:58:59
2011/07/11 947 18923
첫째. 비용이 턱없이 너무 많이 들어갑니다. 둘째, 지난 관리비 내역서를 유심히 보면 아시겠지만 CCTV 보수와 DVR 시스템은 예전에 거액을 들여 이미 증축, 보수한 적이 있습니다. 셋째, 우리 아파트는 현 CCTV 말고도 지하주차장 누수와 빗물 고임, 지하실 바닥 미관 불량 등 먼저 해결해야할 아파트 일이 산적해 있습니다. 이와 같은 연유로 전 이번 2억 5천만원 가량 되는 CCTV 설치 건에 대하여 반대합니다. 그리고 지금 경
 17969
 22:07:59
2007/12/06 3010 55922
이곳 '네티즌칼럼'은 여러분의 칼럼게시판입니다. 여러분들의 예리하고 탁월하신 칼럼 기대합니다. 가입한 회원만이 글을 쓸 수 있습니다. 하지만 댓글은 누구나 달 수 있습니다. ^^; 기타 광고나 홍보는 '광고게시판'을 이용해 주세요. 문의사항이나 이상한점, 버그같은게 있으시면 아래의 메일로 연락주십시요. 최대한 빨리 수정하도록 하겠습니다. 그럼... 관리자: blrun39@hanafos.com
 17969
 23:05:29
943
2015/07/03 0 41
해당 블로그 댓글 듣고 보니 그리스의 상황이 정말로 심각하군요. 좋은 내용 잘 보았습니다. 정말 문제가 많은 나라로군요. 비정상적으로 비대해지는 공무원들의 수효도 문제가 많다는 생각이 듭니다. 그리스가 바로 그런 나라였다니... 해당 블로그 댓글2 뒤늦게 포스트를 발견해 잘 읽었네요. 그리스 사태를 이해하는데 많은 도움이 되었습니다. 고맙습니다. ^^;
 17969
 21:20:17
942
2015/06/28 0 44
해당 블로그 댓글 전 이번 대통령의 국회법 거부권 소식에 대해서 너무 국회와 정부의 이해다툼으로만 보고 있다는 것에 좀 불만이 있습니다. 사실 정부가 발의하는 법률이나 의원들이 발의하는 법률이나 결국에는 국회 본회의의 과반수 출석과 과반수 찬성을 얻어야지 통과될 수 있는데 이번 대통령의 거부권 행사는 정부가 이렇게 제정된 법률을 기반으로 시행하는 시행령 등에 대하여는 국회가 간섭하지 말라는 메시지거든요.
 17969
 19:17:48
941
2015/06/12 1 91
해당 블로그 댓글 회사의 자산가치와 다르게 비정상적으로 반영된 주가와 거기에 편승해 어떤 이득을 취하려는 계열사 대주주와 주주들간의 이해다툼인 것 같네요. 그래도 합병은 주주의 이익과 결부된 민감한 문제이기 때문에 쉽지 않은 것이 사실이죠. 보통 자산 총계를 주식수에다 주가를 곱한 비용과 연계해 계산하는 게 맞지 않나요? 전 그렇게 계산할 것 같습니다만... 다만 주식가치가 자산을 정확히 반영하지 못한다고 ?/font>
 17969
 06:34:06
940
2015/06/11 1 72
클라우드란 게 여러개의 서버를 연동해서 서비스 한다는 건데 사용자 웹호스팅 계정이 여럿 있으면 그 클라우드란 개념도 결국 일반 호스팅의 시분할 개념과 별로 다를 바 없어진다는 것이죠. 결국 사용자가 많아지면 클라우드나 일반 SSD 호스팅이나 속도는 별반 차이가 없다는 결론에 다다르게 됩니다. 오히려 하드디스크를 어떤 걸 사용했느냐가 더 큰 속도 차이를 보이지 않을까 사료됩니다. 예전에 구글의 무료 클라우드 서
 17969
 10:17:47
939
2015/06/10 1 95
해당 블로그 댓글 요새 정말 공기 중에 병원균이 돌아다니고 있는 것 같기도 합니다. 사람마다 반응하는 방식과 저항력이 다 틀리긴 한데 이 병이 호흡곤란 증세가 있다는 얘기를 들었을 때 최근에 숨쉴 때 약간의 답답함이 느껴지기도 했었거든요. 몸에서 병원체 바이러스와 싸우는 과정인지는 모르겠지만 암튼 그랬습니다. 당국에서도 긴장하는 걸 보면 유행성 질병이 돌고 있는 건 맞는 것 같더라구요. 근데 질병 이름이 특이
 17969
 19:06:08
938
2015/06/06 1 129
윈도우XP에서 읽기전용 속성 파일의 특성이 일부 저장속성으로 보였다가 마우스로 해당 파일을 선택하면 얼마있다 저장속성이 사라지고 원래대로 읽기전용 속성이 보이는 현상이 발생하였네요. ㅡ_ㅡ 아래 동영상 안에 나오는 파일들은 모두 처음부터 읽기전용 속성의 파일들입니다. 천 처음에 이게 어떤 원격해킹인 줄 알았는데 어떤 규칙성이 있는 걸 알고 웜바이러스나 다른 악성코드 문제일 수 있다는 결론을 내리게 되었습?/font>
 6736
 15:26:09
937
2015/04/30 2 180
자바스크립트를 사용해 JSONP 방식으로 AJAX를 구현해 봤습니다. jsonp4.html 은 euc-kr 로 인코딩된 문서이고 클라이언트에서 그 문서가 로드되고 버튼을 누르면 다른 서버에 존재하는 UTF-8로 인코딩 된 script.php 문서로 이름과 나이를 전송해 "블라블라블라" 란 서버 데이타와 함께 다시 받아서 현재 화면을 리프레쉬 해주고 있습니다. 그래서 다시 비동기로 출력된 한글은 unescape를 사용해 한글이 깨지지 않도록 해주고 있
 6736
 16:38:02
936
2015/04/17 3 199
jquery-1.7.1.min.js 라이브러리를 사용해 JQuery로 JSONP 방식으로 AJAX를 구현해 봤습니다. jsonp1.html과 jsonp2.html은 euc-kr 로 인코딩된 문서이고 클라이언트에서 그 문서가 로드되고 버튼을 누르면 다른 서버에 존재하는 UTF-8로 인코딩 된 jsonp.php 문서로 성(이름)을 전송해 전체이름의 데이타를 다시 받아서 현재 화면을 리프레쉬 해주고 있습니다. 그래서 다시 비동기로 출력된 한글은 unescape를 사용해 한글이 깨지
 6736
 06:27:14
935
2015/03/26 3 229
이번 브라우저 속도 측정 테스트는 크롬의 백그라운드 실행을 끄고 매 실행시마다 캐쉬와 검색 기록을 모두 지우고 테스트했기 때문에 정확합니다. 테스트 환경은 XP이고 맨 아래는 제가 브라우저 속도 테스트를 시작하기 전의 XP 바탕화면 이미지를 올려 놓은 것입니다. [브라우저 아이콘을 클릭 후 8개 탭 로딩이 완료되기 까지 걸린 시간 측정] [웹페이지 로딩 속도 측정] [테스트를 실행하기 전 바탕화면 상태] * 관리자님에
 6736
 14:58:19
2015/03/09 3 270
커스텀화된 html 출력을 위한 json 타입을 사용했습니다. [POST 방식- json3.html] <!DOCTYPE html> <html> <head> <title>jQuery Ajax Example with JSON Response</title> <script src="http://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <!-- 여기에 자바스크립트 코드를 기술한다 --> <script type="text/javascript"> $(document).rea
 17969
 09:52:20
933
2015/03/09 3 252
커스텀화된 html 출력을 위한 json 타입을 사용했습니다. [POST 방식 - json2.html] <!DOCTYPE html> <html> <head> <SCRIPT type="text/javascript" src="http://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js"></SCRIPT> <script> function loadXMLDoc() { $.ajax({ type: "POST",
 17969
 09:46:38
932
2015/03/09 2 239
JQuery(제이쿼리)를 사용하지 않고 XMLHttpRequest 를 사용해 구현했습니다. [POST 방식 - json1.html] <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; var params="str1="+escape("오늘은 2015년 3월 7일입니다!")+"&str2="+escape("시간은 오후 7시 59분입니다!"); if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
 17969
 09:42:03
931
2015/03/09 2 223
jquery-1.7.1.min.js 라이브러리를 사용해 JQuery로 AJAX를 구현해 봤습니다. jquery1.html과 jquery2.html은 euc-kr 로 인코딩된 문서이고 서버측 문서 jquery_info.php은 UTF-8로 인코딩 된 문서입니다. 그래서 한글로 된 값을 전달할 때 escape, 다시 비동기로 출력된 한글은 unescape를 사용해 한글이 깨지지 않도록 해주고 있습니다. ^^; [GET 방식 - jquery1.html] <!DOCTYPE html> <html> <head> <SCRIPT type=
 17969
 07:11:48
930
2015/03/07 1 211
여기서 ajax1.html 은 한글코드가 euc-kr 이고 ajax_info.php 는 한글코드가 utf8 입니다. ajax1.html에서 ajax_info.php 으로 GET이나 POST 방식의 str을 전송할 때 escape 처리를 하고 서버에서 비동기로 결과를 받을때 unescape 처리를 해서 한글이 깨지지 않도록 해주고 있습니다. [GET 방식 - ajax1.html] <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { var xmlhttp; if(window.XMLHttpRequ
 17969
 14:14:10
929
2015/03/04 2 399
INTRODUCTIONHardware SpecificationOpenGL ES and XBMC on UbuntuOpenGL ES2.0 with myAHRS+ on UbuntuC Tinkering Kit16x2 LCD+IO ShieldMake Android Game StationSTORY ABOUT THE ODROID-C1We had received tons of requests for the following model of ODROID-W. So, we started survey for components for ODROID-W2. Finding out the right CPU was the key of this project. Our original target was similar c
 6736
 06:58:28
928
2015/02/04 3 418
XP의 크롬(버전 40.0.2214.93 m / 버전 40.0.2214.94 m)과 오페라(버전 27.0.1689.54 / 버전 27.0.1689.66)에서 다음 링크를 클릭해 보십시요. 첫번째 페이지에서 소스보기를 해보시면 알겠지만 background= 에 폭 208px의 배경 이미지가 기술돼 있는데 XP 크롬과 오페라에서 이걸 제대로 출력하지 못하고 있습니다. 이미지가 옆으로 죽 나열돼 깨지는데 IE, 스윙브라우저, 파이어팍스, 사파리 에선 제대로 출력이
 6736
 06:49:50
927
2015/01/08 5 543
브라우저에서 다음 링크를 열면 플래쉬 무비가 재생되는 속도를 측정할 수 있습니다. 최대 재생 빈도수는 120 fps 입니다. var newwin; function launchwin(winurl,winname,winfeatures) { //This launches a new window and then //focuses it if window.focus() is supported. newwin = window.open(winurl,winname,winfeatures); if(javascript_version > 1.0) { //delay a bit here because IE4 encounters errors /
 6736
 10:12:16
926
2015/01/06 8 344
제가 실제로 다른 컴 펜티엄 D 3.4 Ghz 윈도우7에서 테스트한 결과를 알려드립니다. ^^;측정시간은 각 페이지들을 카트보기로 모두 내용보기를 하는데 걸린 시간입니다.단위는 ms(밀리세컨드) 이고 1초는 1000ms 입니다. 결과는 걸린 시간이고 낮을수록 뛰어납니다.===========================================================================   자료게시판 1페이지 네티즌칼럼 2페이지 스크랩 1페이지 합계 IE11 4163 28
 17969
 07:13:41
925
2015/01/06 6 421
이글루스에서 동영상이 안보이시는 분은 보세요. mms://wm-003.cafe24.com/blrun/swing1.wmv * 관리자님에 의해서 게시물이 이동되었습니다 (2015-06-06 11:15)
 17969
 06:27:37
924
2014/12/07 10 453
미치겠네요. 이런 요상한 버그는 처음인데 혹시 reply_check.php 안에 들어있는 $subject 변수 때문인가 해서 그 안의 변수를 몽땅 $subject2 로 바꾸고 파일 네임도 reply_check2.php로 바꾸고 인클루드를 시켜봐도 마찬가지네요. 나머지 파일의 변수들도 아래와 같이 엘레시엘님 말씀대로 $subject2로 바꾸고 unset 명령으로 mysql 쿼리가 배열로 저장되는 부분을 초기화 해보아도 마찬가지네요. 심지어는 vote_check.php 13행
 17969
 06:56:35

1 [2][3][4][5][6][7][8][9][10]..[48][다음 10개]

Copyright 1999-2015 Zeroboard / skin by pooh長