UTF8 encoding not working when using ajax

2020-04-02 08:40发布

问题:

I recently changed some of my pages to be displayed via ajax and I am having some confusion as to why the utf8 encoding is now displaying a question mark inside of a box, whereas before it wasn't.

Fore example. The oringal page was index.php. charset was explicitly set to utf8 and is in the <head>. I then used php to query the database

Heres is the original index.php page:

<!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 the "main_container" via ajax all the utf8 encoding 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 the javascript page which uses jquery ajax call to retrieve the html stored inside a php page, then places the html inside the div with an id of "main_container". I'm setting the charset in jquery to be 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?

回答1:

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

Check that everything is using UTF-8, your database, database connection, table columns. Check that any static files you are including are also encoded in UTF-8.



回答2:

You wrote

The "display_html()" function calls the javascript page which uses jquery ajax call to retrieve the html stored inside a php page

What do you mean with "the html stored inside a php page"? If you want to load data and display there as a contain of <div> the loaded data should be formated correspondent. I mean that it should be real a code fragment of HTML. Moreover Together with 'contentType' it would be a good idea to specify 'dataType' as "html" or "text". If you don't specity anything the last version of jQuery will "intelligently try to get the results, based on the MIME type of the response". If you know the 'dataType', it would be better to specify there. And if you use ajax use also default 'async: true' and not 'false'.

You should also verify whether jQuery.load method (see http://api.jquery.com/load/) is the best choice for you. You can load with the mathod a full html page if required and display only a part of there: $('#main_container').load('ajax/about_us.html #container');

And about UTF-8 encoding don't forget to save the file really UTF-8 encoded. Use corresponding option of your editor (in Notepad choose "Save As" and then choose as encoding "UTF-8" and not "ANSI").



回答3:

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

If you have uploaded them by FTP or with a web tool, check if they are still UTF-8.



回答4:

In my case neither of the solutions worked until I placed

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