AngularJS $http模塊POST請求

時間 2019-11-30

標籤 angularjs http 模塊 post 請求欄目 AngularJS 简体版

原文原文鏈接

1、代碼以下：javascript

$http({ php

method:'post', html

url:'post.php', 前端

data:{name:"aaa",id:1,age:20} java

}).success(function(req){ json

console.log(req); api

}) app

解決方案：ide

一、 var myApp = angular.module('app',[]);post

myApp . config ( function ( $httpProvider ){

$httpProvider . defaults . transformRequest = function ( obj ){

var str = [];

for ( var p in obj ){

str . push ( encodeURIComponent ( p ) + "=" + encodeURIComponent ( obj [ p ]));

}

return str . join ( "&" );

2. $http({

method : 'post' ,

url : 'post.php' ,

data : { name : "aaa" , id : 1 , age : 20 },

headers : { 'Content-Type' : 'application/x-www-form-urlencoded' },

transformRequest : function ( obj ) {

var str = [];

for ( var p in obj ){

str . push ( encodeURIComponent ( p ) + "=" + encodeURIComponent ( obj [ p ]));

}

return str . join ( "&" );

}

}). success ( function ( req ){

console . log ( req );

})

php

1 $rawpostdata = file_get_contents("php://input");
2 $post = json_decode($rawpostdata, true);
3 //傳的數據都在$post中了;

2、 $http請求數據主要會有如下三種方式

1.get請求

2.post請求

3.jsonp

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Angular基礎</title>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="personCtrl">
        姓：<input type="text" ng-model="firstName"/><br/>
        名：<input type="text" ng-model="lastName"/><br/>
        姓名：<span ng-bind="firstName"></span><span ng-bind="lastName"></span>
    </div>

</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('personCtrl',function($scope,$http){
        $http.get('getData.php').
                success(function(data) {
                    console.log(data);
                }).
                error(function(err) {
                    //錯誤代碼
                });
        //$http.post採用postJSON方式發送數據到後臺，
        // 解決辦法：在後臺php中使用$postData=file_get_contents("php://input",true);這樣就能夠得到前端傳送過來的數據
        var postData={msg:'post的內容'};
        var config={params:{id:'5',name:'張三丰'}};
        $http.post('postData.php', postData,config).
                success(function(data) {
                    console.log(data);
                }).
                error(function(err) {
                    //錯誤代碼
                });
        var myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
        $http.jsonp(myUrl).success(
                function(data){
                    console.log(data);
                }
        ).error(function(err){
                   //錯誤代碼
                });
        $scope.firstName="Wang";
        $scope.lastName="Ben";
    });


</script>
</body>
</html>

<?php
//postData.php文件

//用接收json數據的方式
$msg=file_get_contents("php://input",true);

$name=$_GET['name'];
echo $name.$msg."_post";

$http請求數據主要會有如下三種方式

1.get請求

2.post請求

3.jsonp

[html]view plain copy
       
   
 
<!DOCTYPE html>  
<html lang="zh_CN">  
<head>  
    <meta charset="UTF-8">  
    <title>Angular基礎</title>  
</head>  
<body>  
<div ng-app="myApp">  
    <div ng-controller="personCtrl">  
        姓：<input type="text" ng-model="firstName"/><br/>  
        名：<input type="text" ng-model="lastName"/><br/>  
        姓名：<span ng-bind="firstName"></span><span ng-bind="lastName"></span>  
    </div>  
  
</div>  
<script src="angular.min.js"></script>  
<script type="application/javascript">  
    var myApp=angular.module('myApp',[]);  
    myApp.controller('personCtrl',function($scope,$http){  
        $http.get('getData.php').  
                success(function(data) {  
                    console.log(data);  
                }).  
                error(function(err) {  
                    //錯誤代碼  
                });  
        //$http.post採用postJSON方式發送數據到後臺，  
        // 解決辦法：在後臺php中使用$postData=file_get_contents("php://input",true);這樣就能夠得到前端傳送過來的數據  
        var postData={msg:'post的內容'};  
        var config={params:{id:'5',name:'張三丰'}};  
        $http.post('postData.php', postData,config).  
                success(function(data) {  
                    console.log(data);  
                }).  
                error(function(err) {  
                    //錯誤代碼  
                });  
        var myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";  
        $http.jsonp(myUrl).success(  
                function(data){  
                    console.log(data);  
                }  
        ).error(function(err){  
                   //錯誤代碼  
                });  
        $scope.firstName="Wang";  
        $scope.lastName="Ben";  
    });  
  
  
</script>  
</body>  
</html>  

[php]view plain copy
       
<?php  
//getData.php文件  
echo 'hello';

[php]view plain copy
       
<?php  
//postData.php文件  
  
//用接收json數據的方式  
$msg=file_get_contents("php://input",true);  
  
$name=$_GET['name'];  
echo $name.$msg."_post";