Databases
StackOverflow2013
Postsdbo
POjQuery AJAX call messes up character encoding
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery AJAX call messes up character encoding
    text
    copied!<p>I have a servlet that outputs JSON. The output encoding for the servlet is ISO-8859-1. Pages in our webapp are also set to ISO-8859-1. I would use UTF-8, but this is outside my control; we have to use ISO-8859-1.</p> <p>When I hit the servlet by itself, I can see JSON data that has been outputted. The character encoding is correct, and none of the characters look strange.</p> <p>However, when I call the servlet via AJAX and use the data retrieved to populate a select box, I get � in the place of (it seems) all characters that have accents (for example i with grave or acute accent, dieresis, or circumflex). When I look at the response in the Net tab under Firebug, I can see that that the text looks fine. However, when I use that data to populate the select box, I get the diamond-with-questionmark. </p> <p>These characters are all valid ISO-8859-1 characters, and so I don't understand why they don't show up correctly.</p> <p><strong>EDIT</strong></p> <p>Some more information. I use <code>GET</code> in <code>jQuery.ajax</code> and I've set <code>scriptCharset</code> to <code>ISO-8859-1</code>. On the server-side, I've explicitly set the encoding to ISO-8859-1 using <code>request.setCharacterEncoding("ISO-8859-1");</code></p> <p><strong>EDIT</strong> </p> <p>Code samples:</p> <p>This is what I have currently. I added <code>scriptCharset: "ISO-8859-1"</code> to no effect.</p> <pre><code> jQuery.ajax({ url: "/countryAndProvinceCodeServlet", data: data, dataType: "json", type: "GET", success: function(data) { ... }, }); </code></pre> <p>My servlet uses <code>org.json.JSONObject</code> and simply outputs the string by doing <code>response.getWriter().print(jsonObject.toString());</code></p> <p><strong>UPDATE</strong></p> <p>Per the comments about JSON and how it should be UTF-8, I tried to see if I could grab the data as text (so set <code>dataType</code> to <code>text</code> in <code>jQuery.ajax</code>) and then evaluate it as JSON myself (in Javascript). That doesn't seem to work either! When I do <code>console.log</code>, I still get the funky diamonds. However, when I look at it under the Net tab in Firebug everything shows up fine:</p> <p>Net tab:</p> <pre><code>{"error":false, "provinces":{"DZ-01":"Adrar", "DZ-16":"Alger", "DZ-23":"Annaba", "DZ-44":"Aïn Defla", "DZ-46":"Aïn Témouchent", "DZ-05":"Batna", "DZ-07":"Biskra", "DZ-09":"Blida", "DZ-34":"Bordj Bou Arréridj", "DZ-10":"Bouira", "DZ-35":"Boumerdès", "DZ-08":"Béchar", "DZ-06":"Béjaïa", "DZ-02":"Chlef", "DZ-25":"Constantine", "DZ-17":"Djelfa", "DZ-32":"El Bayadh", "DZ-39":"El Oued", "DZ-36":"El Tarf", "DZ-47":"Ghardaïa", "DZ-24":"Guelma", "DZ-33":"Illizi", "DZ-18":"Jijel", "DZ-40":"Khenchela", "DZ-03":"Laghouat", "DZ-29":"Mascara", "DZ-43":"Mila", "DZ-27":"Mostaganem", "DZ-28":"Msila", "DZ-26":"Médéa", "DZ-45":"Naama", "DZ-31":"Oran", "DZ-30":"Ouargla", "DZ-04":"Oum el Bouaghi", "DZ-48":"Relizane", "DZ-20":"Saïda", "DZ-22":"Sidi Bel Abbès", "DZ-21":"Skikda", "DZ-41":"Souk Ahras", "DZ-19":"Sétif", "DZ-11":"Tamanghasset", "DZ-14":"Tiaret", "DZ-37":"Tindouf", "DZ-42":"Tipaza", "DZ-38":"Tissemsilt", "DZ-15":"Tizi Ouzou", "DZ-13":"Tlemcen", "DZ-12":"Tébessa"}} </code></pre> <p>But when I do <code>console.log(text)</code> with what I get from <code>jQuery.ajax</code>, I get the following:</p> <pre><code>{"error":false, "provinces":{"DZ-01":"Adrar", "DZ-16":"Alger", "DZ-23":"Annaba", "DZ-44":"A�n Defla", "DZ-46":"A�n T�mouchent", "DZ-05":"Batna", "DZ-07":"Biskra", "DZ-09":"Blida", "DZ-34":"Bordj Bou Arr�ridj", "DZ-10":"Bouira", "DZ-35":"Boumerd�s", "DZ-08":"B�char", "DZ-06":"B�ja�a", "DZ-02":"Chlef", "DZ-25":"Constantine", "DZ-17":"Djelfa", "DZ-32":"El Bayadh", "DZ-39":"El Oued", "DZ-36":"El Tarf", "DZ-47":"Gharda�a", "DZ-24":"Guelma", "DZ-33":"Illizi", "DZ-18":"Jijel", "DZ-40":"Khenchela", "DZ-03":"Laghouat", "DZ-29":"Mascara", "DZ-43":"Mila", "DZ-27":"Mostaganem", "DZ-28":"Msila", "DZ-26":"M�d�a", "DZ-45":"Naama", "DZ-31":"Oran", "DZ-30":"Ouargla", "DZ-04":"Oum el Bouaghi", "DZ-48":"Relizane", "DZ-20":"Sa�da", "DZ-22":"Sidi Bel Abb�s", "DZ-21":"Skikda", "DZ-41":"Souk Ahras", "DZ-19":"S�tif", "DZ-11":"Tamanghasset", "DZ-14":"Tiaret", "DZ-37":"Tindouf", "DZ-42":"Tipaza", "DZ-38":"Tissemsilt", "DZ-15":"Tizi Ouzou", "DZ-13":"Tlemcen", "DZ-12":"T�bessa"}} </code></pre> <p>It seems to me that jQuery is doing something weird with the data.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload