Ajax - 기초 - (2)

Ajax - 기초 - (2)

< script type = "text/javascript" >

function startAjax() {

let maker = document . getElementById ( "maker" ).value;

if (maker = = "" ){

document . getElementById ( "modelView" ).innerHTML = "" ;

document . getElementById ( "priceView" ).innerHTML = "" ;

return ;

}

let xhr = new XMLHttpRequest();

xhr. onload = function (){

//alert(xhr.responseText);

//응답정보를 json object 로 변환한다

let json = JSON.parse(xhr.responseText);

document . getElementById ( "modelView" ).innerHTML = json.model;

document . getElementById ( "priceView" ).innerHTML = json.price;

}

xhr.open( "get" , "JSONObjectServlet?maker=" + maker);

xhr.send();

}

< / script >

< / head >

< body >

< select id = "maker" onchange = "startAjax()" >

< option value = "" > --- < / option >

< option value = "현대" > 현대 < / option >

< option value = "르노" > 르노 < / option >

< option value = "기아" > 기아 < / option >

< / select >

모델 < span id = "modelView" > < / span > 가격 < span id = "priceView" > < / span >

< / body >

from http://kbj96.tistory.com/43 by ccl(S) rewrite - 2021-11-15 03:27:54