form을 이용한 post 필터링?
본문
안녕하세요. 왕초보로자로서 궁금한점이 있어 글을 올립니다.
공부를 해서 사이트를 하나 만드려고 하는데요.
https://fall.visitkorea.or.kr/search.do
여기 사이트 처럼, 글을을 검색하는 사이트를 만드려고 합니다.
저는 조건을 선택하고 필터링하는 기능을 form을 통해서 구현을 했어요.
form의 submit 버튼을 누르면 현재 페이지에서 input data를 받아서 처리를 해서 글들을 보여주고 있습니다. 헌데 어느정도 만들고 보니까, form의 submit 버튼을 누르면 페이지가 refresh 되더라구요.
refresh되는 느낌을 안주려고 submit 버튼을 누르면 ajax로 필터링된 글들을 불러와 넣는 기능까지 구현해 놨는데 말이죠.
<form action="/" method="get" id="race_filter">
<div id="filter">
<!-- 날짜 필터 -->
<label for="year_input">년</label>
<select name="year_input" id="year_input">
<option value="" <?php selected($year_input, ''); ?> >전체</option>
<option value="2017" <?php selected($year_input, '2017'); ?> >2017년</option>
<option value="2018" <?php selected($year_input, '2018'); ?> >2018년</option>
</select>
<label for="month_input">월별</label>
<select name="month_input" id="month_input">
<option value="01" <?php selected($month_input, '01'); ?> >1월</option>
<option value="02" <?php selected($month_input, '02'); ?> >2월</option>
</select>
....
<button type="submit" name="submit_filter" >필터</button>
</form>
(일부 내용입니다.)
위의 submit 버튼을 누르면 input의 data를 받아서 jquery ajax로 data를 전달하여 이 조건에 맞는 글들을 필터링한 뒤, 아래에 div 형태로 불러들이는 구조입니다.
https://fall.visitkorea.or.kr/search.do 이 사이트처럼 검색버튼을 눌렀을 때, refresh 되는 느낌이 안나게 하려면 form을 사용하면 안될까요? 위 사이트는 form을 사용하지 않은 것 같은데..
위 사이트 처럼 구현하려면 현재 form으로 된 것에서 어떤 것을 바꾸면 좋을지 조언을 부탁드려도 될까요?
왕초보라 질문의 내용이 약간 엉성할수 있겠네요. 감사합니다.
답변 1
form 이 사용되든, 되지 않든 ajax 로 처리를 하게 되면,
페이지가 이동되지 않고 처리됩니다.
전달하고자 하는 정보만 넘겨주면 됩니다. form 으로 꼭 감싸지 않아도 됩니다.
ex.
$(function() {
$('button[name=submit_filter]').on('click', function() {
yr = $('#year_input').val();
mo = $('#month_input').val();
$.ajax({
url: 'ajax_search.php',
type: 'POST',
data: {
year : yr,
month : mo
},
success: function(result){
$("#div1").html(result);
}
});
});
});
아 그렇군요. 감사합니다. 즐거운 크리스마스 되세요.
