[JSON] JS - JSON - HTML (= 테이블 및 드롭다운 형태로 출력 + 출력개수선택)

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>