AngularJS $http模块POST请求

最新推荐文章于 2021-02-20 14:29:04 发布

BjYangyanfei

最新推荐文章于 2021-02-20 14:29:04 发布

阅读量1.1k

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/bjyangyanfei/article/details/58585962

版权

AngularJS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、代码如下：

$http({

method:'post',

url:'post.php',

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

}).success(function(req){

console.log(req);

})

解决方案：

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

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中了;

二、 $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 plaincopy
       
   
<!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 plaincopy
       
   
<?php  
//getData.php文件  
echo 'hello';  

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

显示效果：

BjYangyanfei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS $http模块POST请求

一、代码如下：$http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 解决方案：1、 var myApp = angular.module('app',[]);
复制链接

扫一扫