ajax로 폼값 받아 div에 출력하는 방법

JQUERY/소스코드 2015. 2. 3. 09:36

728x90

90% 는 이미 질문자님께서 작성하셨네요, 다음처럼 조금만 손보시면 됩니다.

1. marketing.php 는 다음과 같다고 가정합니다.

<?php
header('Content-Type: application/json');
$request = strtolower($_REQUEST['input_value']);
$words = array(
'20140120' => array(
      'MT'    => 'gubun1',
      'M_TARKET'    => '100',
      'M_RESULT' => '90'
),
'20140121' => array(
      'MT'    => 'gubun2',
      'M_TARKET'    => '80',
      'M_RESULT' => '60'
)
);

if(array_key_exists($request, $words)) {
   $output = array('definition' => $words[$request]);
   echo json_encode($output);
}
?>

2. 수정된 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
          
}); 
function show(frm) { 
   $.getJSON("marketing.php",{input_value : frm.input_value.value}, function(data) { 
         $('#pnlDisplay').empty();  
         var table = "<table border='1'><tr><td>구분</td><td>목표</td><td>실적</td><td>진척율</td></tr>"; 
         $.each(data, function(index, entry) { 
                table += '<tr>'; 
                table += '<td>' + entry.MT + '</td>'; 
                table += '<td>' + entry.M_TARKET + '</td>'; 
                table +='<td>' + entry.M_RESULT + '</td>'; 
                table +='<td>' + ((parseInt(entry.M_RESULT) / parseInt(entry.M_TARKET))*100) + "%" + '</td>'; 
                table += '</tr>'; 
         }); 
         table += "</table>"; 
         $('#pnlDisplay').append(table); 
  }); 
  return false; 
} 
</script> 
</head> 
<body> 
<form onsubmit="return show(this);"> 
<input type="text" name="input_value" value="20140120"> 
<input type="submit"> 
</form> 
<div id="pnlDisplay"></div> 
</body> 
</body> 
</html> 
Colored by Color Scripter

cs

다음 링크에서 결과를 확인해 보세요.

새로고침 없이 한 페이지에서 모두 처리해주실 수 있어요.

728x90

저작자표시

'JQUERY > 소스코드' 카테고리의 다른 글

jQuery - Simple Tree (0)	2015.02.03
onclick 이벤트 제거하기 (0)	2015.02.03
jQuery - 동적으로 테이블 관리 (0)	2015.02.03
jquery .hover (마우스오버와 마우스아웃) (0)	2015.02.03
[jquery]radio 버튼 (0)	2015.02.03
[jQuery] jQuery Plugin을 이용한 form validation (0)	2015.02.03
[jQuery] dataType속성을 이용한 JSON 데이터 가져오기 (0)	2015.02.03
[jQuery] $.getJSON 이용한 JSON 데이터 가져오기 (0)	2015.02.03

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

160x600