Angular problem example using post and get to pass parameters to the background

1. Source of the problem

We all know that you can use get and put to pass parameters to the background, and the form is similar to name=jyy&id=001. However, in ng I found that the background cannot receive data during the asynchronous transmission using $http post. In fact, this problem is due to the request header. The default request header in ng is: "Content-Type":"application/json", which means that the passing parameters is in the json format. But the default background is Content-Type': 'application/x-www-form-urlencoded'. Therefore, in this case, the data received by the background will be empty.

So why can we pass parameters by using get? In the book, I found a sentence like this: "The value of this key is a string map or object, which will be converted into a query string and appended to the URL. If the value is not a string, it will be serialized by JSON". It can be understood that in get the parameter passing is directly appended to the url, then the parameter form {"id":"1","name":"jyy"} will be converted into id=1&name=jyy appended to the url. Then you can get it directly in the background. For example:

var app = ('app',[]);
    ('ctrl',function($scope,$q,$http){
      var defer = $();
      var promise = ;
      $http({
        method: "get",
        params:{id:1,name:jyy},
        url:""
      }).success(function(data){
        (data);
      });
      (function(data){
        $ = data;
      })
    })

Enter echo $_GET[id] in the background (PHP) and it will be displayed normally.

Then, let’s study how to solve the value of post.

2. Solve the problem

1. Modify the request header

The first method is to modify the request header in ng and change the json format to x-www-form-urlencoded. Click to view the modification method.

It is worth noting that when using the second method, you can modify the parameter transmission format of put, get, post, and common. Therefore, if you modify the method, you can only use this method to get parameters in the background. This blog post states that using common to set up parameters can be used to transfer parameters using put, get, and post at the same time. However, in my actual operation, I found that modifying common cannot use post to pass parameters, and only by setting the request header of post can it be done.

In addition, since the parameters in ng are expressed in json format, jquery needs to be introduced and serialized representation is used with its $.param ("json format of parameter list").

First use the modified post request header. The specific code is as follows:

var app = ('app');

    (function($httpProvider){
      $ = { 'Content-Type': 'application/x-www-form-urlencoded' }
    })
    ('ctrl',function($scope,$resource,$q,$http){
      var defer = $();
      var promise = ;
      $http({
        method: "post",
        data:$.param({"id":"1","name":"jyy"}),
        url:""
      }).success(function(data){
        (data);
      });
      (function(data){
        $ = data;
      })
    })

At this time, in the background (using php), enter echo $_POST[id] and it will be displayed. The request header displayed in debug is exactly what we set.

2. Solve it in the background

Since we are using php, we temporarily use the php method to solve it. In this method, we do not modify the request header. Because it is normal to pass the value of get, it is good to get the value of the post. Since ng has passed the value to the background, even if the request header is different, it will always be transmitted. Since it can be transmitted, get it first. At this time, use $GLOBALS['HTTP_RAW_POST_DATA'] to display the passed thing. So what is this $GLOBALS['HTTP_RAW_POST_DATA']? Search the online and find out that the $HTTP_RAW_POST_DATA variable contains the original POST data. This variable is only generated when data of MIME type is not recognized. When PHP cannot recognize Content-Type type, the corresponding data in the http request package will be filled in the variable $HTTP_RAW_POST_DATA. That is to say, although the request header now has conflicts, it can be displayed. as follows:

var app = ('app',[]);
    ('ctrl',function($scope,$q,$http){
      var defer = $();
      var promise = ;
      $http({
        method: "post",
        data:{'id':'1','name':'jyy'},
        url:""
      }).success(function(data){
        (data);
      });
      (function(data){
        $ = data;
      })
    })

php code:

echo $GLOBALS['HTTP_RAW_POST_DATA'];

What is displayed at this time is: {"id":"1","name":"jyy"}. I found that this result was displayed correctly. So isn't it enough to align directly? OK, let's take a look at what type it is: using gettype() is a string, which means it is a json string. Then use json_decode() to convert, and an error will be reported when you find it. OK, give up on using this method.

But there is another way at this time. Use file_get_contents("php://input"), in this method, php://input is a read-only stream that can access the requested raw data. In case of POST requests, it is best to use php://input instead of $HTTP_RAW_POST_DATA because it does not depend on specific directives. At this time, this method can return the passed parameters. The code is as follows:

$a = json_decode(file_get_contents("php://input"));
  echo $a->id;

The result outputs the correct id.

The above is all the content of this article. I hope it will be helpful to everyone's study, and I hope everyone will support me more