본문 바로가기
개발/자바스크립트 및 프론트

Ajax(Json) -> Controller(Map)로 값 넘기기 (Key/Value 형식으로)

by kakk789 2022. 8. 11.
- input type="text" 의 value 값을 가져와서 Json 형태로 Controller에 넘기기
- Mybatis에서 vo 사용하지 않고 hashmap으로 파라미터 전달하기!

JavaScript 방법1 - 조금 복잡한 방법)

  • text 타입의 input들을 each 반복문을 돌림
    Key 값으로 사용 될 input type의 id를 'dataId' 변수로 저장
    Value 값으로 사용 될 input type의 value를 dataValue 변수로 저장
    'allData' 배열에 Key, Value 형식으로 저장 (Key 값은 무조건 "큰 따옴표" 로 묶어야함, 왜? 규칙임)
  • Join 함수를 이용하여 배열을 쉼표(,) 구분자 기준으로 잘라서 하나의 String 배열로 만듦
    해당 배열을 중괄호( { } 로 묶어 객체로 표현 후 JSON.parse 함수로 Json으로 변환 (JSON 형식으로 전달을 위해서)

    let allData = [];
    let allDataPlain ="";
    $("input[type='text']").each(function(){
        let data = this;
        let dataId =data['id']+"";
        let dataValue =$(data).val()+"";
        allData.push('"' + dataId + '"' +':'+ '"' + dataValue + '"');
    })
    allDataPlain = JSON.parse( "{" + allData.join(",") + "}" ); //
    $.ajax({
        url:"/insertList",
        type:'POST',
        data:allDataPlain,
        success:function(){
            alert("success")
        },
        error:function(){
            alert("error")
        }
    })

JavaScript 방법2)

  • 바로 객체를 선언하여 ( {} ) 속성명에 값을 추가하는 방식
  • reqData[속성명] = 값
    let reqData={};
    $("input[type='text']").each(function(){
        let data = this;
        let dataId =data['id']+"";
        let dataValue =$(data).val()+"";
        reqData[dataId] = dataValue;
    })
    $.ajax({
        url:"/insertList",
        type:'POST',
        data:reqData,
        success:function(){
            alert("success")
        },
        error:function(){
            alert("error")
        }
    })

Controller

  1. getParameterMap()으로 받은 후 Map<String, Object> 타입으로 전달받아 사용
  2. Map을 Hash맵으로 변경하여 파라미터로 전달
    @RequestMapping(value="/insertList", method = RequestMethod.POST)
    public String insertListPost(HttpServletRequest request){

        Map<String,Object> reqMap = (Map<String,Object>)request.getParameterMap();
        HashMap<String,Object> reqHashMap = new HashMap<String,Object>();
        for (String k: reqMap.keySet()) {
            reqHashMap.put(k, reqMap.get(k));
            System.out.println("key 값  " + k);
            String[] value = (String[])reqMap.get(k);
            System.out.println("value 값  " + value[0]);
        }
        return "insertList";
    }

 

반응형

댓글