• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
String JS - toUpperCase() 메서드 - 대문자로 변환
String JS - trim() 메서드 ★ - 문자열양쪽 공백제거 (= trim메서드 = 트림 메서드)
String JS - valueOf() 메서드 - 객체값 (문자열자체 = 밸류어브)
String JS - anchor() 메서드 - name 속성 갖는 앵커태그 (= 링크태그) (비표준)
String JS - big() 메서드 - 큰글씨 (= 큰글자 = 글자 크게) (비표준)
String JS - blink() 메서드 - 글자 깜빡임. (비표준)
String JS - bold() 메서드 - 굵은글씨 (= 글자 굵게) (비표준)
String JS - fixed() 메서드 - 텔레타이프 텍스트 (비표준)
String JS - fontcolor() 메서드 - 글자색깔 (비표준)
String JS - fontsize() 메서드 - 글자크기 (비표준)
String JS - italics() 메서드 - 이탤릭체 (비표준)
String JS - link() 메서드 - src 속성 갖는 앵커태그 (= 링크태그) (비표준)
String JS - small() 메서드 - 작은글씨 (= 글자 작게) (비표준)
String JS - strike() 메서드 - 취소선 (= strike메서드 = 스트라이크메서드, HTML5제외)
String JS - sub() 메서드 - 아래첨자 (비표준) (= sub메서드 = 서브메서드)
String JS - sup() 메서드 - 위첨자 (비표준)
Number JS - Number -
Number JS - constructor - 객체생성자함수 (숫자 경우)
Number JS - MAX_VALUE - JS최대값 (= JS에서 가장큰수)
Number JS - MIN_VALUE - JS최소값 (= JS가장작은값)
7/67
목록
찾아주셔서 감사합니다. Since 2012