네티즌칼럼

Total article 1131 : 1 page / total 46 page

[1131]

일반 (403)

블록 (84)

코딩 (27)

Subject :

[코딩] [강추] JQuery를 사용해 폼 인자 여러개 전달해 비동기 처리 후 받기...

(Homepage) \| Point : 71498 \| 2015-03-09 09:46:38 \| Read : 2,949 \| Vote : 169

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

[POST 방식 - json2.html]
<pre class="brush: js; first-line: 1" title="json2.html">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;SCRIPT type="text/javascript" src="https://www.blrun.net/bbs/syntaxhighlighter/scripts/jquery-1.7.1.min.js">&lt;/SCRIPT>
&lt;script>
function loadXMLDoc()
{
	$.ajax({
		type: "POST",
		url: "https://www.blrun.net/eight/study/json_info2.php",
		dataType: "json",
		data: {"str1":escape("오늘은 2015년 3월 7일입니다!"),"str2":escape("시간은 오후 7시 59분입니다!")},
		success: function(data) {
			$('#myDiv').html('&lt;table>&lt;tr>');
			for(var i in data.exp) {
				$('#myDiv').append('&lt;td>' + unescape(data.exp[i]) + '&lt;/td>');
			}
			$('#myDiv').append('&lt;/tr>&lt;tr>');
			for(var i in data.date) {
				$('#myDiv').append('&lt;td>' + unescape(data.date[i]) + '&lt;/td>');
			}
			$('#myDiv').append('&lt;/tr>&lt;/table>');
		}
	});
}
&lt;/script>
&lt;/head>
&lt;body>

&lt;div id="myDiv">&lt;h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!&lt;/h2>&lt;/div>
&lt;form method="post" action="">
&lt;button type="button" onclick="loadXMLDoc()">Change Content&lt;/button>
&lt;/form>

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

$arr1=array("AJAX는 새로운 프로그래밍 언어가 아니다.","AJAX는 빠르고 동적인 웹페이지를 만들 수 있는 기술이다.");
$arr2=array($str1,$str2);

$jsontable=array("exp"=>$arr1,"date"=>$arr2);

print json_encode($jsontable);
?>
</pre>
<br><br>
[실제동작 - POST 방식]<br>
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
	$.ajax({
		type: "POST",
		url: "https://www.blrun.net/eight/study/json_info2.php",
		dataType: "json",
		data: {"str1":escape("오늘은 2015년 3월 7일입니다!"),"str2":escape("시간은 오후 7시 59분입니다!")},
		success: function(data) {
			$('#myDiv').html('<table><tr>');
			for(var i in data.exp) {
				$('#myDiv').append('<td>' + unescape(data.exp[i]) + '</td>');
			}
			$('#myDiv').append('</tr><tr>');
			for(var i in data.date) {
				$('#myDiv').append('<td>' + unescape(data.date[i]) + '</td>');
			}
			$('#myDiv').append('</tr></table>');
		}
	});
}
</script>
</head>
<body>

<div id="myDiv"><h2>AJAX로 이 문장을 화면 깜빡임 없이 바꿔보자!</h2></div>
<form method="post" action="">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</form>

</body>
</html>

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

216.73.216.123

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

[HOME]

[bitly]