카테고리 없음
버튼을 누를 때마다 실행되도록 하고 결과가 문서에 출력 되도록 하세요.
by 팁텍북
2017. 10. 19.
버튼을 누를 때마다 실행되도록 하고 결과가 문서에 출력 되도록 하세요.
| <!--jquery ajax --> |
| <!doctype html> |
| <html> |
|
|
| <head> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
| <script> |
| $(document).ready(function () { |
| $("#button1").click(function () { |
| appendDataToTable(); |
| }); |
| }); |
| |
| function appendDataToTable() { |
| var url = "http://www.filltext.com/?callback=?"; |
| $.getJSON(url, { |
| 'rows': 4, |
| 'fname': '{firstName}', |
| 'lname': '{lastName}', |
| 'tel': '{phone|format}', |
| }) |
| .done(function (data) { |
| $.each(data, function (i, item) { |
| var html = |
| "<td>" + item.fname + "</td>" + |
| "<td>" + item.lname + "</td>" + |
| "<td>" + item.tel + "</td>"; |
| $("<tr/>").html(html).appendTo("#records"); |
| }); |
| }); |
| } |
| </script> |
| </head> |
|
|
| <body> |
|
|
| <button id="button1">클릭</button> |
| <br> |
| <table id="records"></table> |
|
|
| </body> |
|
|
| </html> |
댓글