(Spring + JSP + jQuery-AJAX + JSON ) setting environment for UTF-8 issue?

Question

I am doing a chat project in java with Spring 3.x which needs Multi-language support.

Here is what I have done.

My JSP has:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8"); %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

My web.xml has:

<filter>
    <filter-name>characterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
        <param-name>encoding</param-name>
        <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
        <param-name>forceEncoding</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

In my Tomcat server.xml has:

  <Connector (...) URIEncoding="UTF-8" />

My my Java environment has:

  JAVA_TOOL_OPTIONS     -Dfile.encoding=UTF8

In my Spring-controller has:

@RequestMapping(value="sendMessage.html",method=RequestMethod.POST)
public  @ResponseBody String sendMessage(HttpSession session,@RequestParam String intxnId,@RequestParam String message, HttpServletRequest request,HttpServletResponse response){

        String contentType= "text/html;charset=UTF-8";
        response.setContentType(contentType);
        //response.setCharacterEncoding("UTF-8");
        response.setHeader("Content-Type", "application/json; charset=UTF-8");
        try {
            request.setCharacterEncoding("utf-8");

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        response.setContentType("text/plain;charset=UTF-8"); 

        System.out.println("Send Message UTF-8 ----------------- "+ message);

    String json = null;
    BasicChatProtocol protocol = CustomerManagement.protocol.put(intxnId, chatProtocol.getProtocol());
    HashMap<String,String> result = send.send(message, intxnId, protocol);
    result.put("name",(String) session.getAttribute("nickName"));
    ObjectMapper map = new ObjectMapper();
    if(result.size()!= 0){
        try {
            json = map.writeValueAsString(result);
            result.clear();
            result = null;
            System.out.println("Send Message  :::::::: : "+json);
        } catch (Exception e) {
            e.printStackTrace();
        } 
    }
return json;

}

My jQuery-AJAX will be:

function sendMessage(){
    var intxnId = $("#hide").val();
    var message = $("#message").val();
    alert("send  : \n intxnId : "+intxnId+"\nmessage : "+message);
    $.ajax({  
        type: "POST", 
        cache: false,
        url: contexPath + "/sendMessage.html",
        async:     true,
        contentType: "application/x-www-form-urlencoded; charset=utf-8",
        scriptCharset: "utf-8",
        dataType: 'html',
        data: "intxnId=" + intxnId +"&message="+ encodeURIComponent(message),

        success: function(response){

            if(response != null && response !="" && response !="null"){

                var txt = '{"data":['+response+']}';
                var json = eval ("(" + txt + ")");
                for(i =0;i<json.data.length;i++){
                    var data = json.data[i];

                    var name = data.name;
                    var message = data.message;
                    var time = data.time;

                    alert("Name : "+name+"\nMessage : "+message+"\ntime : "+time);
                    var createHTML  = send(name,message,time);
                    $("#messageDisplayArea").append(createcreateHTML);
                };
            }

        },  
        error: function(e){  
            alert('Error: ' + e);  
        }, 

    }); 
}

But when I send the local language message அவர்களுக்கு(Tamil language), I got only ??????? in the alert box and the view page.

But I got the local language in the console(SysOut in controller) and all Special Characters works.

Note : I think I am having the problem with response from the controller.Because when I send the message to the controller I got the message as small boxes in javascript alert. But when the response came I am getting the ????? in the alert box.

My console prints,

Send Message UTF-8 ----------------- அவர்களுக்கு
Mesge what I send :::: அவர்களுக்கு
Send Message :::::::: : {"message":"அவர்களுக்கு","time":"time","name":"Human"}

I don't know what I am missing.

Note : I am not using any data base.

Hope our stack users will give a better solution. Good answers are definitely appreciated.

where are you getting those ?????? characters? In the spring controller, in the console? I'm pretty sure your javascript is sending the wright chars — Abel Pastur, Jul 02 '13 at 10:19
In the controller `sysout` I am getting the local language in the console .But in `alert box` and in the `view page` I am getting `?????` — Human Being, Jul 02 '13 at 10:27
I think I am having the problem with response from the `controller`.Because when I send the `message` to the `controller` I got the `message as small boxes` in `javascript` alert. But when the response came I am getting the `?????` in the alert box. — Human Being, Jul 05 '13 at 07:42
ANSWER : This is one of the useful reference http://charlie.cu.cc/2012/08/spring-mvc-ajax-request-with-utf-8-support/ — Human Being, Jul 28 '15 at 09:26

Abel Pastur · Accepted Answer · 2013-07-08T12:45:26.250

I have tried your javascript with this test controller:

@Controller
public class TestController {
    @RequestMapping(value = "/test", method = POST, produces = "application/json; charset=utf-8")
    public @ResponseBody
    ResponseEntity<String> sendMessage(HttpSession session, @RequestParam String intxnId, @RequestParam String message, HttpServletRequest request, HttpServletResponse response) {

        System.out.println("Send Message UTF-8 ----------------- " + message);

        String json = null;
        HashMap<String, String> result = new HashMap<String, String>();
        result.put("name", "test");
        result.put("message", message);
        result.put("time", "time");
        ObjectMapper map = new ObjectMapper();
        if (!result.isEmpty()) {
            try {
                json = map.writeValueAsString(result);
                System.out.println("Send Message  :::::::: : " + json);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        HttpHeaders responseHeaders = new HttpHeaders(); 
        responseHeaders.add("Content-Type", "application/json; charset=utf-8"); 
        return new ResponseEntity<String>(json, responseHeaders, HttpStatus.CREATED);
    }
}

It works like a charm, and I see UTF-8 characters from the response in the alert popup, using chrome browser.

My test.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%request.setCharacterEncoding("UTF-8");%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>Test</h1>
        <input type="text" id="hide" />
        <input type="text" id="message"/>
        <button id="button">test</button>
        <div id="messageDisplayArea"></div>


        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
        $('#button').on('click', sendMessage);

        function sendMessage() {
            var intxnId = $("#hide").val();
            var message = $("#message").val();
            alert("send  : \n intxnId : " + intxnId + "\nmessage : " + message);
            $.ajax({
                type: "POST",
                cache: false,
                url: "${pageContext.request.contextPath}/test",
                async: true,
                data: "intxnId=" + intxnId + "&message=" + encodeURIComponent(message),
                success: function(response) {

                    if (response !== null && response !== "" && response !== "null") {
                        alert("Name : " + response.name + "\nMessage : " + response.message + "\ntime : " + response.time);
                        $("#messageDisplayArea").append(message);
                    }

                },
                error: function(e) {
                    alert('Error: ' + e);
                },
            });
        }
    </script>
    </body>

</html>

Thanks for your reply.Can you post the `JQuery-ajax` code that you have used or the full code? — Human Being, Jul 05 '13 at 10:27
Still getting the same `?????`in the `ajax success alert`.did you used the configuration for `utf-8` in `web.xml` ? — Human Being, Jul 05 '13 at 12:13
Yes, I have the same org.springframework.web.filter.CharacterEncodingFilter configured — Abel Pastur, Jul 05 '13 at 12:59
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32956/discussion-between-kite-player-and-abel-pastur) — Human Being, Jul 05 '13 at 13:08

score 3 · Answer 2 · edited May 23 '17 at 12:25

3

Can you try using produces = "text/plain;charset=UTF-8" in the @RequestMapping

@RequestMapping(value = "/test", method = POST, produces = "text/plain;charset=UTF-8")
    public @ResponseBody

also check this: UTF-8 encoding problem in Spring MVC

edited May 23 '17 at 12:25

Community

1
1

answered Jul 05 '13 at 10:36

Devashish Mamgain

2,077
1
18
39

score 0 · Answer 3 · answered Jul 05 '13 at 00:14

I would try some debugging in the browser. Use some developer tools in your browser (Developer Tools in Chrome, Firebug extension for Firefox or any other such tool in any other browser) and try to check HTTP response you are getting for your ajax - check if HTTP headers are correctly set (utf8 encoding, etc.) and maybe if ypur special characters are displayed correctly there - so you can see, if you are getting correct answer from the server.

BTW - I dont see any error in code you posted, everything looks good. Just double check, that page on that you are displaying response with ajax, has utf8 encoding set...

(Spring + JSP + jQuery-AJAX + JSON ) setting environment for UTF-8 issue?

3 Answers3

Linked