JQUERY/소스코드
ajax로 폼값 받아 div에 출력하는 방법
nineDeveloper
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> |
cs |
다음 링크에서 결과를 확인해 보세요.
새로고침 없이 한 페이지에서 모두 처리해주실 수 있어요.
728x90
반응형