How to fix jquery ajax response with � (quotation mark block)

Question

When I try to get html back from a ajax request I get multiple �. Why is this and how to correct it?

    $.ajax
    ({
        type: 'POST',
        url: Generic.ajaxSluice,
        dataType: "html",
        data:
        {
            param: paramArr
        },
        success:function(response)
        {
            console.log(response);
        }
    });

This code gives me this response in the console:

[["������������������������...����������������������0", "../upload/images/Untitled-2.png"], ["1", "../upload/images/j.png"], ["2", "../upload/images/peppe.png"], ["�����������������������������������������"]]

Answer 1

AJAX requires UTF-8. It's not even optional. From the jQuery.ajax() manual page:

The W3C XMLHttpRequest specification dictates that the charset is always UTF-8; specifying another charset will not force the browser to change the encoding

Thus your server side code needs to read and write UTF-8. Period.

---

One way to verify if your server generates UTF-8 is to type a known char (I often use the € symbol) and see if you get the expected bytes (E2 82 AC). To get an hex dump:

• From server (PHP) you can use bin2hex() → e282ac
• From client (JavaScript) you can use encodeURIComponent() → %E2%82%AC

If you happen to see a lot of zeroes you're somehow getting null characters. That's a non-printable control code that should only appear on binary files (never on text). That reveals a different issue.