(Spring + JSP + jQuery-AJAX + JSON ) setting environment for UTF-8 issue?
java, jquery, spring, utf-8
Solution
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>
Problem
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.