#33 Java Script ajax를 이용한 MySQL 연동

 2019.07.01

​

 // ajax

 Asynchronous Javascript And XML, 에이잭스

 비동적인 웹 어플리케이션의 제작을 위해 HTML, CSS, DOM, Java Script 등의 조합을 이용하는 웹 개발 기법

 

  ex) MySQL과 연동하여 데이터를 화면에 나열

// restMList.jsp
 
<%@ page language="java" contentType="application/json; charset=EUC-KR" pageEncoding="EUC-KR"%>
.
.
.
String webData = "["; // json문자열
// [{"id" : "id001", "pw" : "pw001"}, {"id" : "id001", "pw" : "pw001"}]
 
while(rs.next()){
    webData += "{\"id\":\"";
    webData += rs.getString("m_id");
    webData += "\",\"pw\":\"";
    webData += rs.getString("m_pw");
    webData += "\"}";
    if(!rs.isLast()) {
        webData += ",";
    }
}     
 
webData += "]";
out.print(webData);

 

<!-- ajaxRequest.html -->
.
.
.
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
    $('#btn').click(function(){
        //alert('btn click');
        $('#webData').empty();
        $.ajax({
            url : './restMList.jsp',
            type : 'post',
            success:function(webData){
                    // alert(webData);
                    for(let wd of webData) {
                        $('#webData').append('<tr>');
                        $('#webData').append('<td>' + wd.id + '</td>');
                        $('#webData').append('<td>' + wd.pw + '</td>');
                        $('#webData').append('</tr>');
                        }
            }
        });
    });
</script>

 

 

실행결과