jQuery: UTF-8 not working with ajax request

Question

I have a php file which uses jQuery.ajax() to grab some data from another php file into a div.

jQuery.ajax({
    type: 'POST',
    encoding:"UTF-8",
    dataType:"html", 
    contentType: "text/plain; charset=UTF-8",
    url: '/path/data.php',
    success: function(msg) {
        jQuery('#dataBox').html(msg);
    }
});

My problem is that if I have some "special" characters in the data I'm getting through ajax such as åäö then I get the "question mark in a black diamond"-mark. If I open the external file in the browser it works. If I put some special characters on the main page, it works.

Some simplified code:

data.php:

$mysqli = new mysqli("localhost", "username", "pass", "db");
$mysqli->set_charset("utf8");
$mysqli->query("SET GLOBAL time_zone = '+00:00'");
$stmt = $mysqli -> prepare("SELECT GROUP_CONCAT(sometext) AS mytext FROM `mytable`");
$stmt -> execute();
$results = selectResults($stmt);
$stmt -> close();
$mysqli -> close();

selectResults function:

function selectResults($stmt)
{
    $parameters = array();
    $results = array();

    $meta = $stmt->result_metadata();

    while ( $field = $meta->fetch_field() ) {   
     $parameters[] = &$row[$field->name]; 
    }

    call_user_func_array(array($stmt, 'bind_result'), $parameters);

    while ( $stmt->fetch() ) {
      $x = array();
      foreach( $row as $key => $val ) {
         $x[$key] = $val;
      }
      $results[] = $x;
    }

    return $results;

}

data.php:

foreach($results as $result){
 $textArray = explode(',', $result['mytext']);
}
foreach($textArray as $text){
echo($text);
}

Answer 1

Sorry but if you get the unicode replacement character �, then the input has been interpreted in UTF-8 but the raw bytes of the input did not match UTF-8, I.E. it was not UTF-8.

If you see the correct characters when visiting the page directly, then it must be those ajax parameters forcing UTF-8 interpretation on data that is actually in some other encoding, the default is Windows-1252 for browsers.

Post the php code and/or the raw bytes of the data.

Answer 2

Fixed it by setting utf8_encode() around the data that I echo() in the data.php file. Didn't think of trying this since it worked fine when opening data.php in the browser.

EDIT:

Moved the utf8_encode() to the selectResults function instead so that it encodes all values that I get from the database.

Answer 3

I'll write this as an answer since it might help others more easily.

To solve the problem you must see to it that the content you are outputting is the same as ajax expects it to be so for utf-8 the content need to be utf-8 or encoded as utf-8 using

utf8_encode($content);

If you could provide utf-8 content from the database as Esailija says you would not need to use the encode-function.