Angular, $http post and german special characters
code, webdev, angular
March 20th 2016 (3 years ago)
Recently, when writing an web application using Angular framework i had experienced a small, yet very interesting problem, which is not even correctly described on Stackoverflow (heh).

The part of the problem was german special characters like: Ä É ß Ü etc.
(worth mentioning, charset on HTML document was set to use UTF-8).

I was sending a JSON data through POST to PHP script, which then, after validation of data, should insert them into MYSQL table.
Using angular, one of the most common way to submit the data is by using either $.param function from Jquery, or use $httpParamSerializerJQLike service from Angular. Both having the same feature of changing special characters into unicode characters/

Example of solution

    $http({
    method  : 'POST',
    url     : 'http://test.com'
    data    : $.param(data), // pass in data as string, data is JSON
    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data
    }).then(function(data) {
    // some code here
    })
Then, in PHP script i had:
    $postData = $_POST; // i ommited the validation process on this example to make it shorter
    $json = json_encode($postData);
The JSON at this moment had a special characters in unicode format, BUT, becuase lack of JSON_UNESCAPED_UNICODE the “\” from unicode characters were always cutted out, which made a lot of problems with encoding the text correctly.

The solution

when using Angular $http post with $.param from Jquery (or $httpParamSerializerJQLike service from Angular), always use JSON_UNESCAPED_UNICODE attribute with PHP json_encode.

After using:
    $postData = $_POST; // i ommited the validation process on this example to make it shorter
    $json = json_encode($_POST,JSON_UNESCAPED_UNICODE);
All problems with special characters dissapeard and i could continue my work :).