Ajax URL 파라미터 데이터 보내기 사용 방법

게시판 검색 기능에서 검색 조건을 선택한 뒤에 검색 버튼을 클릭하면,

검색 조건에 일치하는 게시글만을 페이지에 노출되는 기능을 구현하려고 합니다.

 

Ajax(비동기방식)를 사용한 이유는 3가지의 검색 조건 중에 하나의 조건이라고 변경되면,

ajax를 사용해서 페이지에 노출되는 게시글이 바로 변경되는 기능을 원하기 때문입니다.

 

아래의 사진에서 예산, 인원, 키워드의 3가지 검색 조건이 있습니다. 

선택 박스와 입력 태그에서 onchange를 사용하였습니다.

<select>의 value값을 script로 가져와서 Ajax를 이용하여, 조건에 맞는 게시글만 노출되는 방법입니다.

ajax를 사용하는 부분

---

ajax 사용하기

첫 번째 방법으로 select 태그의 값을 스크립트로 가져와서 ajax로 사용하는 방법입니다.

<script>
    function selectCataFn(){
	//select태그의 값을 담을 변수
        var val1 = "";
        var val2 = "";
	// select 태그의 value 값을 변수에 저장
        val1 = $("#selectbox1").val();
        val2 = &("#selectbox2").val();
	// ajax로 넘겨줄 데이터를 키와 값의 형태로 저장
        var allData = {"val1" : val1, "val2":val2};

        &.ajax({
            url:"이동경로",//데이터를 넘겨줄 경로
            type:"get",
            data:allData,//넘겨줄 데이터
            datatype:"html",
            success:function(data){
                //성공시 ajax로 다시 로드할 부분?
                &("#load").html(data);
            }
        });
    }
</script>

 

위의 방법은 키와 값의 형태로 데이터를 넘겨주는 방법이고, 아래의 두 번째 방법은 URL 뒤에 직접적으로 파라미터로 데이터를 입력하여 넘겨주는 방법입니다.

반응형

 

<script>
    function selectCataFn(){
        var val1 ="";
        var val2 ="";

        val1 = $("#selectbox1").val();
        val2 = $("#selectbox2").val();

        $.ajax({
            url : "이동경로?&val1"+val1+"&val2="+val2,
            type:"get",
            datatype:"html",
            success:function(data){
            	$("#load").html(data);
            }
        });
    }
</script>

 

개인적으로 어려워서 여기저기 찾아보면서 방법을 찾아서 스스로도 이해하는데 복잡했습니다.

처음에는 두 방법이 어떤 차이가 있는지 생각했는데, 수정하는 과정에서 다시 보게 되니 배열을 만들어서 Ajax의 data로 배열을 넘기는 것이 더 깔끔하고 사용이 편리한 느낌이었습니다.