Geek Answers Handbook

UTF8 encoding does not work when using ajax

I recently changed some of my pages that will be displayed via ajax, and I have some confusion as to why the utf8 encoding now displays a question mark inside the field, whereas it was not before.

As an example. The oringal page had index.php. charset was explicitly installed in utf8 and is located in <head> . Then I used php to query the database

Heres is the original page of index.php:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Title here</title> </head> <body class='body_bgcolor' > <div id="main_container"> <?php Data displayed via php was simply a select statement that output the HTML. ?> </div>

However, when I made the change to add a menu that populated "main_container" via ajax, all utf8 encodings stopped working. Here's the new code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Title here</title> </head> <body class='body_bgcolor' > <a href="#" onclick="display_html('about_us');"> About Us </a> <div id="main_container"></div>

The display_html () function calls a javascript page that uses the jquery ajax call to retrieve the html stored inside the php page and then puts the html inside the div with the id "main_container". I install charset in jquery as utf8 like:

 $.ajax({ async: false, type: "GET", url: url, contentType: "charset=utf-8", success: function(data) { $("#main_container").html(data); } });

What am I doing wrong?

+7
jquery ajax utf-8
source share
4 answers

Encoding is more than specifying a meta tag and content type - the files themselves must really be in the encoding you specify, or you will get mojibake .

Make sure everything uses UTF-8, your database, database connection, table columns. Make sure all static files you include are also encoded in UTF-8.

+6
source share

You wrote

Function call "display_html ()" javascript page that uses jquery ajax call to retrieve html stored inside php page

What do you mean by "html stored inside php page"? If you want to load data and display it as <div> content, the downloaded data must be copied accordingly. I mean, this must be a real piece of HTML code. In addition, along with "contentType" it would be nice to specify "dataType" as "html" or "text". If you are not doing anything, the latest version of jQuery "will intelligently try to get results based on the MIME response type." If you know "dataType", it is better to specify it. And if you use ajax, also use async: true, not false, by default.

You should also check if the jQuery.load method (see http://api.jquery.com/load/ ) is the best choice for you. You can use mathod to download the full html page, if necessary, and display only part of it: $('#main_container').load('ajax/about_us.html #container');

And about the UTF-8 encoding, do not forget to save the file in UTF-8 encoding. Use the appropriate option in your editor (in Notepad, select Save As, and then select "UTF-8" rather than "ANSI" as the encoding).

+1
source share

Make sure all your files are saved as UTF-8 (or UTF-8 wo BOM).

If you downloaded them via FTP or using a web tool, check if they are all UTF-8.

0
source share

In my case, none of the solutions worked until I posted

 header('Content-type: text/html; charset=utf-8');
0
source share

More articles:


All Articles