ANGULARJS $http Submit Data exploration

The first two days in the project, the front-end JS frame with the angularjs frame; The whole station is about the same time something happened; that is when I use the $http.post () method to submit some data to the server, the background is always receiving data;

Indicates the use of other methods of temporary substitution;

There is time to study the matter today; I have tried all the information on the Internet; it is not the wrong sentence, but it gives me some ideas to solve the problem.

Beginning of the text: first to do a demo as follows, mainly to compare their differences;

The HTML is as follows:

<div class= "Container-fluid" data-ng-app= "JJD" data-ng-controller= "index" ><div class= "container" >< Div class= "Row" ><div class= "col-md-5" ><p class= "h4 text-center" &GT;JQ $.post () Submit </p><p>  </p><div class= "Form-group" ><label for= "ExampleInputEmail1" > User name </label><input Type= "text" ng-model= "Sdata.name" class= "Form-control" placeholder= "user name" ></div><div class= "Form-group" ><label for= "" > Password </label><input type= "password" ng-model= "sdata.pwd" class= "Form-control" placeholder= "Password" ></div><button type= "button" class= "btn btn-primary btn-block" ng-click= "JPostData ()" &GT;JQ Submit </button></div><div class= "col-md-2" > </div><div class= "col-md-5" > <p class= "H4 text-center" >angularjs $http.post () function </p><p> </p><div class= " Form-group "><label for=" ExampleInputEmail1 "> User name </label><input type=" text "ng-model=" Sdata2.name "class= "Form-control" placeholder= "user name" ></div><div class= "Form-group" ><label for= "" > Password </ Label><input type= "Password" ng-model= "sdata2.pwd" class= "Form-control" placeholder= "password" ></div>< Button type= "button" class= "btn btn-primary btn-block" ng-click= "Apostdata ()" > $http submit </button></div> </div></div></div>

The JS code is as follows:

varApp = Angular.module (' JJD ', []); App.controller (' Index ',function($scope, $http) {$scope. sdata={name:' JQuery ', pwd:' JQuery '    }; $scope. Sdata2={name:' Angularjs ', pwd:' Angularjs '    }; /*The AJAX submission of JQ*/$scope. Jpostdata=function(){        //Console.log ($scope. sdata);$.post ('/web/data.php ', $scope. Sdata,function(d) {console.log (d);        })    }; /*Angularjs's $http submission*/$scope. Apostdata=function() {$http ({URL:'/web/data.php ', Method:' POST ', Data: $scope. Sdata2}}). Success (function(DA) {console.log (DA);    }); };});

The background uses PHP's $_post to receive:

 <? php  header  ("content-type:text/html; Charset=utf-8 ");   $aname  = $_post  [' Name ' ];  $apwd  = $_post  [' pwd '  $aname    $msg  [' pwd '] =  $apwd   echo  Json_encode ( $msg  );? 

The server uses Wampsever local-initiated local server. To this, the page service set up, start testing;

Results

From the comparison can be seen in the background is not worth the reason is mainly 1, 2, 3 different;

where 1 and 2 are the requested header file information;

3 is the data type is different; JQ sends form data, whereas ANGULARJS sends JSON data by default;

The cause has been found, and the following begins to transform;

First, for 1 and 2, the header information is configured in the $http () method;

Secondly, the data is converted; Here I made a simple JSON-to-string conversion service;

The modified code is as follows:

/*------Create a ANGULARJS app------*/varApp = Angular.module (' JJD ',[]);/*Create a JSON-formatted conversion service to string*/App.service (' Jsontostr ',function(){     This. Transform =function(jsondata) {varstring = ' ';  for(strinchjsondata) {String= string + str + ' = ' + Jsondata[str] + ' & '; }                var_last = String.LastIndexOf (' & ')); String= string.substring (0, _last); returnstring; };});/*---------Home Controller--------*/App.controller (' Index ',function($scope, $http, JSONTOSTR) {//inject the created JSONTOSTR service$scope. sdata ={name:' JQuery ', pwd:' JQuery '    }; $scope. Sdata2={name:' Angularjs ', pwd:' Angularjs '    }; /*The AJAX submission of JQ*/$scope. Jpostdata=function(){        //Console.log ($scope. sdata);$.post ('/web/data.php ', $scope. Sdata,function(d) {console.log (d);        })    }; /*Angularjs's $http submission*/$scope. Apostdata=function(){        //Console.log (Jsontostr.transform ($scope. sdata2));$http ({URL:'/web/data.php ', Method:' POST ', Data: $scope. Sdata2, Data:jsonToStr.transform ($scope. sdata2),//formatting the submitted dataheaders: {' Accept ': ' */* ',                ' Content-type ': ' application/x-www-form-urlencoded; Charset=utf-8 '}}). Success (function(DA) {console.log (DA);    }); };});

To this, Angularjs submit data back to the problem of not receiving the solution (for JSON data format only); Dedicated to the small partners in the struggle;

There should be another way of thinking about this problem, that is, in the server to get JSON format data support, interested small partners can try;

ANGULARJS $http Submit Data exploration