SpringMVC Ajax에서 풀다운 표시 데이터 취득 & Ajax 수신 데이터의 깨짐 대응

11983 단어 편지아약스spring
한 풀다운을 선택하면 다른 풀다운 목록의 표시 후보를 전환하는 방법에 대해 아래의 2 패턴 중 어느 쪽으로 할까 고민하고 있었습니다.

1. 모든 패턴을 미리 화면으로 설정하고 풀다운 변경시 화면에서 전환
2. 풀다운 변경 시 Ajax에서 데이터 검색

1. 의 방법은 전환 처리가 번거롭기 때문에 2. 방법으로하기로 결정했습니다.

home.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</head>
<body>

<div>
    <select id="select1" style="width: 80px;">
        <option value="nothing">-</option>
        <option value="001">北海道</option>
        <option value="002">東北</option>
        <option value="003">北陸</option>
        <option value="004">関東</option>
    </select>
    <select id="select2" style="width: 80px;">
        <option value="nothing">-</option>
    </select>
</div>

<script th:src="@{/resources/js/jquery-1.12.4.min.js}" src="../../../resources/js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
    $("#select1").change(function() {
        $.ajax({
            type: "POST",
            url: "select",
            data: "select1=" + $("#select1").val(),
            dataType: "text",
            success: function(msg) {
                $("#select2").html(msg);
            }
        });
    });
});
</script>
</body>
</html>

jquery에서 id = "select1"의 풀다운 전환시 Ajax 통신하도록 설정
데이터를 얻을 수 있으면 id = "select2"인 풀다운 HTML을 다시 씁니다.

HomeController.java
package jp.co.test.controller;

import java.util.List;
import java.util.Locale;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import jp.co.test.service.HomeService;

@Controller
public class HomeController {

    private static final Logger logger = LoggerFactory.getLogger(HomeController.class);

    @Autowired
    private HomeService homeService;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String home(Locale locale, Model model) {
        return "home";
    }

    @RequestMapping(value = "/select", method = RequestMethod.POST)
    @ResponseBody
    public String getSelectData(String selectValue) {
        logger.info("start");

        StringBuilder sb = new StringBuilder("<option value=\"nothing\">-</option>");

        List<String> selectDataList = homeService.getSelectData(selectValue);
        selectDataList.stream()
            .map(value -> String.format("<option value=\"%s\">%s</option>", value, value))
            .forEach(option -> sb.append(option));

        logger.info(sb.toString());

        logger.info("end");
        return sb.toString();
    }

}

Controller측의 처리에서는 태그 첨부의 데이터를 돌려주도록 설정
그래서 작동시켜 보면 어때? 깨져있다. .



Ajax에서 수신한 데이터가 깨졌습니다.
여러가지 조사해 보면 Controller의 RequestMapping에 "produces="text/plain;charset=UTF8""를 추가하면 해결하는 것 같습니다.



무사히 해결했습니다만, 문자 깨짐에 관해서는 여러가지 있어 힘들군요~

참고 링크

indico api를 사용한 콘텐츠 필터링된 이미지 업로더
jQuery.ajax에 Cache가 남아 곤란하면 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage