title: (Spring + JSP + jQuery-AJAX + JSON ) setting environment for UTF-8 issue?
body: <p>I am doing a <code>chat project</code> in <code>java</code> with <code>Spring 3.x</code> which needs <code>Multi-language support</code>.</p>
  
  <p>Here is what I have done.</p>
  
  <p>My JSP has:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;
  &lt;%request.setCharacterEncoding("UTF-8"); %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  </code></pre>
  
  <p>My <code>web.xml</code> has:</p>
  
  <pre><code>&lt;filter&gt;
      &lt;filter-name&gt;characterEncodingFilter&lt;/filter-name&gt;
      &lt;filter-class&gt;org.springframework.web.filter.CharacterEncodingFilter&lt;/filter-class&gt;
      &lt;init-param&gt;
          &lt;param-name&gt;encoding&lt;/param-name&gt;
          &lt;param-value&gt;UTF-8&lt;/param-value&gt;
      &lt;/init-param&gt;
      &lt;init-param&gt;
          &lt;param-name&gt;forceEncoding&lt;/param-name&gt;
          &lt;param-value&gt;true&lt;/param-value&gt;
      &lt;/init-param&gt;
  &lt;/filter&gt;
  
  &lt;filter-mapping&gt;
      &lt;filter-name&gt;characterEncodingFilter&lt;/filter-name&gt;
      &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
  &lt;/filter-mapping&gt;
  </code></pre>
  
  <p>In my <code>Tomcat server.xml</code> has:</p>
  
  <pre><code>  &lt;Connector (...) URIEncoding="UTF-8" /&gt;
  </code></pre>
  
  <p>My my <code>Java environment</code> has:</p>
  
  <pre><code>  JAVA_TOOL_OPTIONS     -Dfile.encoding=UTF8
  </code></pre>
  
  <p>In my <code>Spring-controller</code> has:</p>
  
  <pre><code>@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&lt;String,String&gt; 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;
  
  }
  </code></pre>
  
  <p>My <code>jQuery-AJAX</code> will be:</p>
  
  <pre><code>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 +"&amp;message="+ encodeURIComponent(message),
  
          success: function(response){
  
              if(response != null &amp;&amp; response !="" &amp;&amp; response !="null"){
  
                  var txt = '{"data":['+response+']}';
                  var json = eval ("(" + txt + ")");
                  for(i =0;i&lt;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);  
          }, 
  
      }); 
  }
  </code></pre>
  
  <p>But when I send the local language message <code>அவர்களுக்கு</code>(Tamil language), I  got only <code>???????</code> in the <code>alert box</code> and the <code>view page</code>.</p>
  
  <p>But I got the <code>local language</code> in the console(<code>SysOut in controller</code>) and all <code>Special Characters</code> works.</p>
  
  <p><strong>Note :</strong> I think I am having the problem with <code>response from the controller</code>.Because when I send the <code>message</code> to the <code>controller</code> I got the <code>message as small boxes</code> in <code>javascript alert</code>. But when the <code>response</code> came I am getting the <code>?????</code> in the <code>alert box</code>.</p>
  
  <p>My console prints,</p>
  
  <pre><code>Send Message UTF-8 ----------------- அவர்களுக்கு
  Mesge what I send :::: அவர்களுக்கு
  Send Message :::::::: : {"message":"அவர்களுக்கு","time":"time","name":"Human"}
  </code></pre>
  
  <p>I don't know what I am missing.</p>
  
  <p><strong>Note :</strong> I am not using any <code>data base</code>.</p>
  
  <p>Hope our stack users will give a better solution. Good answers are definitely appreciated.</p>