지역 셀렉스 박스에서 AJAX 사용하기
<HTML>
<!--지역:-->
<select name="city" onchange="change(this.selectedIndex);" class="select" id="city">
<option value='전체'>전체</option>
<option value='서울'>서울특별시</option>
<option value='부산'>부산광역시</option>
<option value='대구'>대구광역시</option>
<option value='인천'>인천광역시</option>
<option value='광주'>광주광역시</option>
<option value='대전'>대전광역시</option>
<option value='울산'>울산광역시</option>
<option value='경기'>경기도</option>
<option value='강원'>강원도</option>
<option value='충북'>충청북도</option>
<option value='충남'>충청남도</option>
<option value='전북'>전라북도</option>
<option value='전남'>전라남도</option>
<option value='경북'>경상북도</option>
<option value='경남'>경상남도</option>
<option value='제주'>제주도</option>
</select>
<JavaScript>
$("#city").on("change", function (){
let city = $("#city").val(); // select 값 가져오기
console.log(city);
cobj = {"glocation":city}; // DB연동 list로 받기
console.log(cobj);
$.ajax({
url:"gymList",
type:"post",
data: cobj,
success:function(data){
console.log(data);
if(data != null && data != ""){
let str = "";
for(var i = 0; i < data.length; i++){
str += "<div class='card'>"
if(data[i].gsyname == null){
str += '<img src="images/no_image.jpg" class="card-img-top" alt="...">';
}
else {
str += '<img src="upload/' + data[i].gsysname + '" class="card-img-top" alt="...">';
}
str += "<a href=''>" + "<div class='card-body'>" + data[i].gname + "</a>" +
"<p>" + data[i].glocation + "</p>" + "</div>" + "</div>";
}
$("#result").html(str);
} else {
let str = "등록된 헬스장이 없습니다.";
$("#result").html(str);
}
}, error: function (err){
console.log(err);
}
});
});
'실습기록' 카테고리의 다른 글
| 7월 6일 project - 검색 필터 기능, 중복 제거 (0) | 2023.07.08 |
|---|---|
| 7월 5일 project - 데이터베이스 뷰 생성(My SQL) (0) | 2023.07.08 |
| 7월 3일 project - CSS 레이아웃 (0) | 2023.07.04 |
| JavaScrip 버튼 눌러서 배경색 변경 (0) | 2023.02.18 |
| CSS 연습 (0) | 2023.01.31 |