JSON은 JS로 쉽게 변환 가능.
JS는 웹페이지에서 HTML 만드는 데 사용 가능.
[참고] a.php 세팅 - 아래 좌표 맨 하단 참고
https://homzzang.com/b/js-97?sca=JSON
HTML Table
JSON으로 받은 데이터로 HTML Table 만들기
/b.php 소스
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].mb_name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "a.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
HTML 동적 Table - 출력개수 선택
/b.php 소스
<select id="limit_select" onchange="hz(this.value)">
<option value="">출력 개수</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<p id="demo"></p>
<script>
function hz(sel) {
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { limit:sel };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].mb_name + "</td></tr>";
}
txt += "</table>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "a.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
HTML DropDown List - 특정 데이터 선택 메뉴
/b.php 소스
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].mb_name;
}
txt += "</select>"
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("POST", "a.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
