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>

백엔드:

e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

@RequestMapping(value = "getPeopleById/{id}")
@ResponseBody
    public Map14bd1badcdee783757181db757c9943f getPeopleById(@PathVariable("id") int id) {
        //@PathVariable("id") 如果参数名与url定义的一样注解可以不用定义("id")
        System.out.println(id);
        Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
        return map;
    }
}

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec

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>

백엔드(두 가지 방법):

e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    return map;
}

1cd55414ff5abdfea5dd958e7e547fddbc5574f69a0cba105bc93bd3dc13c4ec

---

@RequestMapping(value = "getPeopleById")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(HttpServletRequest request,HttpServletResponse response) {
    int id = Integer.valueOf(request.getParameter("id"));
    // 这里得到的都是字符串得转换成你需要的类型
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    return map;
}

1cd55414ff5abdfea5dd958e7e547fdd

3. json으로 전송(처음에 언급한 상황)

js(몇 가지 일반적인 ajax 매개변수 설명 포함):

<code>
var id = $("#id").val();
$.ajax({
type: "POST",//请求类型
timeout：10000,  //设置请求超时时间（毫秒）
async:ture,//是否为异步请求
cache:false,//是否从浏览器缓存中加载请求信息。
url: "/IFTree/people/getPeopleById",
contentType: "application/json;charset=UTF-8",//提交的数据类型
data: JSON.stringify({id:id}),//这里是把json转化为字符串形式
dataType: "json",//返回的数据类型
success:function(data){
$("#name").val(data.result.name);
},
error:function(xhr, textStatus, errorThrown) {
}
});
});
</code>

백엔드:

e03b848252eb9375d56be284e690e873ffbe95d20f3893062224282accb13e8f

@RequestMapping(value = "getPeopleById", produces = "application/json")
@ResponseBody
public Map14bd1badcdee783757181db757c9943f getPeopleById(@RequestBody Map14bd1badcdee783757181db757c9943f body){
    System.out.println(""+body.get("id"));
    People people = peopleService.getPeopleById(Integer.valueOf((String)body.get("id")));
    Map14bd1badcdee783757181db757c9943f map = new HashMap14bd1badcdee783757181db757c9943f();
    map.put("result", people);
    return map;
}

6c03c319c38fa6a805f0009c3a1e084a

자세한 설명:

@RequestBody

이 주석은 먼저 요청 요청의 본문 데이터를 읽은 다음 기본 구성된 HttpMessageConverter를 사용하여 구문 분석하고 데이터를 개체에 바인딩한 다음 개체를 컨트롤러에 바인딩합니다. 의 매개변수에 대해
@ResponseBody
이 주석은 Controller 메서드에서 반환된 개체를 HttpMessageConverter를 통해 지정된 형식으로 변환한 후 Response 개체의 본문 데이터 영역에 쓰는 데에도 사용됩니다.

Srping mvc .xml(구성 변환기)

ffbe95d20f3893062224282accb13e8f

 266dae442ac9dc95e3bdec99752e3b4d
 584454ffd05c6f0e3c55641435afbafd
    4d2d13b32b6824d433e20957bf031c9c
        0efe1b6b91208fe6ccb37533ee972a52
        4309a73696dbaeac0ddd115cebb6f9b7
            9cfc82ad645e238cfb23844fcc566fb0
            b15467429256a47420d73a292704d15c
            4fd24be84f9bb50bd43e1c13351e6665
            b6b7f77ea6dcfce4539ab4f516be1876
            05da36058a5ae95ab9385e514bd64d98
            21a4cbd21ee44ffbefb7b42e6a338a11
                d0e6ed04ce081f36fe4ad23a6e2f195d
                    4309a73696dbaeac0ddd115cebb6f9b7
                        8487820b627113dd990f63dd2ef215f3application/json;charset=UTF-84b175f9a50d57c75316becd702e959dc
                    17e5453f22e09a7f163b2d4ce32c48b7
                dde4123f2ed5a21d0bae333af89830f9
            4bb0e59fd50cbfe6f6ce2215b9d9424341a073a833a1192b911b28010fe7d5f7
        17e5453f22e09a7f163b2d4ce32c48b7
    dde4123f2ed5a21d0bae333af89830f9
4bb0e59fd50cbfe6f6ce2215b9d94243

1cd55414ff5abdfea5dd958e7e547fdd

ByteArrayHttpMessageConverter: 바이너리 형식의 데이터를 읽고 바이너리 형식으로 데이터를 쓰는 일을 담당합니다. 문자열 형식의 데이터 읽기 및 바이너리 형식의 데이터 쓰기
ResourceHttpMessageConverter: 리소스 파일 읽기 및 리소스 파일 데이터 쓰기를 담당
FormHttpMessageConverter: 양식에서 제출된 데이터 읽기를 담당
MappingJacksonHttpMessageConverter: json 형식의 데이터 읽기 및 쓰기
SouceHttpMessageConverter: xml의 javax.xml.transform.Source에 의해 정의된 데이터 읽기 및 쓰기를 담당합니다.
Jaxb2RootElementHttpMessageConverter: xml 태그 형식 데이터 읽기 및 쓰기를 담당합니다. : Atom 형식의 데이터를 읽고 쓰는 역할
RssChannelHttpMessageConverter: RSS 형식의 데이터를 읽고 쓰는 역할
프로젝트에서는 json 변환기만 사용하므로 import해야 함 json 패키지에 대해; ):

<code>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.9.11</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.11</version>
</dependency>
</code>

마찬가지로 컨트롤러의 매개변수도 엔터티 클래스 형식으로 데이터를 받을 수 있습니다. 처음에 보고되는 오류(415 지원되지 않는 미디어 유형)는 구성 파일이 올바르게 작성되지 않았고 해당 파일이 가방은 수입되지 않았습니다. 미흡한 점이나 오류가 있으면 지적해주시면 감사하겠습니다

_

프로그래밍에 대해 더 자세히 알고 싶다면
php training
칼럼을 주목해주세요!

위 내용은 Spring의 여러 Ajax 및 백그라운드 데이터 전송 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!