German special characters get stuck when submitting via ajax

Question

I'm submitting parameters (including special characters like ä,ö,ü) via jquery.ajax to a results div. In that div I need to process it with php.

For example:

$( document ).ready(function() {
    $('#dropdown').change(function() {
        $.ajax({
            url: "inc/ajax.results.php",
            type: "GET",
            data: 'type='+$('#type').val()
        }).done(function(data){
            $("#results").html(data);
        });
    });
});

In this example 'type' has the value 'Müller'. In my 'ajax.results.php' I do this:

<?= $_GET['type'] ?>

// Output is 'Müller' in Firefox and Chrome

// BUT in internet explorer the output is 'M'

So, it's fine for Firefox and Chrome, but in internet explorer the result is 'M' (M followed by a square)...

I've tried to change the output like this:

<?= utf8_encode($_GET['type'] ?>

// Output in internet Explorer now is fine (Müller)

// BUT in Firefox and Chrome it is 'Müller'

As the output has to be via PHP (because I'll do further operations with it), I can't find a solution...

Can anyone please help to solve this problem? Thanks a lot

Answer 1

At the HTML page where you have the dropdown, insert

<meta charset="utf-8"> 

or

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

inside the tag.

And be sure to save all your files as UTF-8 (or better: UTF-8 without BOM)

Apache servers are configured to serve files in ISO-8859-1 by default, so you need to add the following line to your .htaccess file:

AddDefaultCharset UTF-8

Answer 2

Thanks all for your help.

I found the solution myself: I've added 'encodeURIComponent()' to my ajax request and it works :-)

$( document ).ready(function() {
    $('#dropdown').change(function() {
        $.ajax({
            url: "inc/ajax.results.php",
            type: "GET",
            data: 'type='+encodeURIComponent($('#type').val())
        }).done(function(data){
            $("#results").html(data);
        });
    });
});