Spring의 여러 Ajax 및 백그라운드 데이터 전송 방법 소개

ajax백그라운드로 데이터를 전송하는 방법을 소개하는 칼럼입니다

추천(무료) : ajax

최근 Ajax를 작성하고 백그라운드로 데이터를 전송할 때 문제가 발생했습니다. json 형태로 데이터를 백그라운드로 전송하고 백그라운드에서 맵 형태로 수신한 후 맵 형태로 데이터를 반환합니다. 그런데 프런트에서 계속 오류 메시지(*)(@415 지원되지 않는 미디어 유형)가 떴고, 안내사항을 참고한 끝에 해결했습니다. 다음은 ajax와 백그라운드 간에 데이터를 전송하는 여러 가지 방법을 요약한 것입니다. 위 문제에 대한 해결책은 이 기사의 끝에 있습니다.

---

1. URL에 데이터를 넣고 전달합니다.

js:

<code>
var id = $("#id").val();
$.ajax({
type: "POST",
url: "/IFTree/people/getPeopleById/"+id,//参数放在url中
success:function(data){ alert(data);
},
error:function(xhr, textStatus, errorThrown) {
}
});
</code>

백엔드:

<code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RequestMapping(value = "getPeopleById/{id}")
@ResponseBody
    public Map<String, Object> getPeopleById(@PathVariable("id") int id) {
        //@PathVariable("id") 如果参数名与url定义的一样注解可以不用定义("id")
        System.out.println(id);
        Map<String, Object> map = new HashMap<String, Object>();
        return map;
    }
}

로그인 후 복사

2. 데이터에 넣기

js:

<code>
var id = $("#id").val();
$.ajax({
type: "POST",
url: "/IFTree/people/getPeopleById",
data: {id:id},
success:function(data){ alert(data.result);
},
error:function(xhr, textStatus, errorThrown) {
}
});
</code>

백엔드(두 가지 방법):

<code></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map<String, Object> getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    Map<String, Object> map = new HashMap<String, Object>();
    return map;
}

로그인 후 복사