Angular Js $httpParamSerializer and jQuery $.ajax

Question

I am working on an Angular.js app and I have to send a POST request to a PHP server. The data I am sending is object of objects.

Something like:

var data = {
    "serviceID": "0001",
    "interpreterDetails": {
        "firstName": "Peter",
        "lastName": "Wilson",
        "password": "Peter",
        "rePassword": "Peter",
        "address": "alex",
        "mobPhone": "01224747748",
        "homePhone": "3910009",
        "mail": "peter@server.domain",
        "fax": "556",
        "hourlyRate": "10",
        "OperatingSys": "android",
        "token": "432132",
        "dialectId": "1"
    }
}

when I send this object using angular

$http({
     url: "http://localhost/saveInterpreter.php",
     method: "POST",
     data: $httpParamSerializer(data),
     headers : {
       "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8;"
     }
 })

and the code in the server returns

object(stdClass)#3 (9) {  
["interpreterDetails"]=>
 string(262) " {"firstName":"Peter","lastName":"Wilson","password":"Peter","rePassword":"Peter","address":"alex","mobPhone":"01224747748","homePhone":"3910009","mail":"peter@server.domain","fax":"556","hourlyRate":"10","OperatingSys":"android","token":"432132","dialectId":"1"}"
["serviceID"]=>
string(4) "0001"
}

but the expected return is

object(stdClass)#3 (8) {
["serviceID"]=>
string(4) "0001"
["interpreterDetails"]=>
object(stdClass)#4 (13) {
["firstName"]=>
string(5) "zxczc"
["lastName"]=>
string(4) "zxcz"
["password"]=>
string(4) "1234"
["rePassword"]=>
string(4) "1234"
["address"]=>
string(4) "sada"
["mobPhone"]=>
string(4) "4532"
["homePhone"]=>
string(4) "1351"
["mail"]=>
string(11) "asd@sdsd.sd"
["fax"]=>
string(6) "123513"
["hourlyRate"]=>
string(2) "26"
["OperatingSys"]=>
string(0) ""
["token"]=>
string(0) ""
["dialectId"]=>
string(1) "1"
 }
}

The problem is that the object inside (interpreterDetails) the outer object (data) is being returned as a string and not an object.

any help with that

NOTE : when I use jQuery it returns the expected results

charlietfl · Accepted Answer · 2015-10-11T14:46:30.593

It would appear that it is being JSON stringified.

You can use json_decode() to to provide expected results

$_POST['interpreterDetails'] = json_decode( $_POST['interpreterDetails'] );

Process would be simpler by using $http default of data sent as application/json and using json_decode(file_get_contents('php://input')) to access the data in php.

EDIT: If you insist on form encoded data try using

data: $httpParamSerializerJQLike(data)

I've never used it but it may be recursive to replicate the same as jQuery as suggested by it's name

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

I suggest you don't use:

"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8;"

It'd be a better idea to work with:

"Content-Type": "application/json"

Angular will transform objects in data into JSON:

Angular provides the following default transformations:

Request transformations ($httpProvider.defaults.transformRequest and $http.defaults.transformRequest):

If the data property of the request configuration object contains an object, serialize it into JSON format.

So, all you got to do is pass the object as it is and it will be converted to JSON automatically by you.

data : data

If you use application/json then you won't be able to pick it up through $_POST but you can do so through php://input, more here.

If you insist on using application/x-www-form-urlencoded:

data : $httpParamSerializer({ jsonData : JSON.stringify(data) })

And then you'll just need to parse the string normally from PHP (it populates $_POST['jsonData'])

score 0 · Answer 3 · answered Oct 11 '15 at 14:33

See @MinusFour 's (better) answer

I think the issue is with httpParamSerializer

httpParamSerializer is used primarily (?) to convert JSON data into a URL param format when sending GET requests

Example) {query: 'test'} to ?query=test

The POST request and data: httpParamSerializer(data) is sending the data in the body of the request anyway so you don't have any special need to format the data as http parameters.

As @charlietfl mentioned, it is stringifying your inner object and making it into a string rather than respecting the actual object format.

You can either parse the JSON (as charlie mentioned) or try removing the $httpParamSerializer.

{
    ...
    data: data,
    ...
}

Angular Js $httpParamSerializer and jQuery $.ajax

3 Answers3