반응형
index.jsp
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 39 40 41 42 43 44 45 46 47 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnAjax").click(function(){ $.ajax({ url : "./ajaxData.jsp", dataType : "json", success : function(data){ $("table").html( "<tr>" + "<th>Index</th>" + "<th>Data2</th>" + "<th>Data3</th>" + "<th>Data4</th>" + "</tr>"); var strTableTr = ""; $.each(data,function(index, item){ strTableTr += "<tr>"; strTableTr += "<td>"+(index+1)+"</td>"; strTableTr += "<td>"+item.data1+"</td>"; strTableTr += "<td>"+item.data2+"</td>"; strTableTr += "<td>"+item.data3+"</td>"; strTableTr += "</tr>"; }); $("table").append(strTableTr); } }); }); }); </script> </head> <body> <button id="btnAjax">버튼</button> <table> </table> </body> </html> | cs |
ajaxData.jsp
1 2 3 4 5 6 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> [ {"data1":"A1","data2":"A2","data3":"A3"}, {"data1":"B1","data2":"B2","data3":"B3"}, {"data1":"C1","data2":"C3","data3":"B3"} ] | cs |
실행화면
'프로그래밍 > Web' 카테고리의 다른 글
| [Web]Responsive Navigation Bar | Html CSS and jQuery따라치기 (0) | 2019.01.19 |
|---|---|
| [Web]자바 스크립트 Boolean형변환 (0) | 2019.01.09 |
| [Web] CSS Text Overlay Effects With mix-blend-mode Property | Html CSS Effects 따라치기 (0) | 2018.12.15 |
| [Web] Html Css List Item Hover Effects 따라치기 (0) | 2018.09.25 |
| [Web]CSS Icon Hover Effect 따라치기 (0) | 2018.09.19 |