javascript - Angular Js $httpParamSerializer and jQuery $.ajax - Stack Overflow

admin管理员组

文章数量:1393302

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": "[email protected]",
        "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":"[email protected]","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) "[email protected]"
["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

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": "[email protected]",
        "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":"[email protected]","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) "[email protected]"
["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

• javascript
• php
• jquery
• ajax
• angularjs

Share Improve this question Follow edited May 13, 2016 at 5:22 Vinoth Krishnan 2,94966 gold badges3030 silver badges3535 bronze badges asked Oct 11, 2015 at 14:11 Peter WilsonPeter Wilson 4,31955 gold badges3838 silver badges6363 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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'])

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,
    ...
}

本文标签： javascriptAngular Js httpParamSerializer and jQuery ajaxStack Overflow