zoukankan      html  css  js  c++  java

  • 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',[]);

    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 plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html lang="zh_CN">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Angular基础</title>  
    6. </head>  
    7. <body>  
    8. <div ng-app="myApp">  
    9.     <div ng-controller="personCtrl">  
    10.         姓：<input type="text" ng-model="firstName"/><br/>  
    11.         名：<input type="text" ng-model="lastName"/><br/>  
    12.         姓名：<span ng-bind="firstName"></span><span ng-bind="lastName"></span>  
    13.     </div>  
    14.   
    15. </div>  
    16. <script src="angular.min.js"></script>  
    17. <script type="application/javascript">  
    18.     var myApp=angular.module('myApp',[]);  
    19.     myApp.controller('personCtrl',function($scope,$http){  
    20.         $http.get('getData.php').  
    21.                 success(function(data) {  
    22.                     console.log(data);  
    23.                 }).  
    24.                 error(function(err) {  
    25.                     //错误代码  
    26.                 });  
    27.         //$http.post采用postJSON方式发送数据到后台，  
    28.         // 解决办法：在后台php中使用$postData=file_get_contents("php://input",true);这样就可以获得前端传送过来的数据  
    29.         var postData={msg:'post的内容'};  
    30.         var config={params:{id:'5',name:'张三丰'}};  
    31.         $http.post('postData.php', postData,config).  
    32.                 success(function(data) {  
    33.                     console.log(data);  
    34.                 }).  
    35.                 error(function(err) {  
    36.                     //错误代码  
    37.                 });  
    38.         var myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";  
    39.         $http.jsonp(myUrl).success(  
    40.                 function(data){  
    41.                     console.log(data);  
    42.                 }  
    43.         ).error(function(err){  
    44.                    //错误代码  
    45.                 });  
    46.         $scope.firstName="Wang";  
    47.         $scope.lastName="Ben";  
    48.     });  
    49.   
    50.   
    51. </script>  
    52. </body>  
    53. </html>  
    [php] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <?php  
    2. //getData.php文件  
    3. echo 'hello';  
    [php] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <?php  
    2. //postData.php文件  
    3.   
    4. //用接收json数据的方式  
    5. $msg=file_get_contents("php://input",true);  
    6.   
    7. $name=$_GET['name'];  
    8. echo $name.$msg."_post";  

    显示效果：

     
  • 相关阅读:
    对 getaddrinfo Android 返回错误 EAI_BADFLAGS
    getaddrinfo详解
    使用moment.js管理时间
    ejs循环实例
    Express优化-合并路由
    Express重定向
    Express中间件
    express.Router创建模块化路由
    Express路由
    nodejs + express访问静态资源
  • 原文地址：https://www.cnblogs.com/yangyanfei/p/6423851.html
Copyright © 2011-2022 走看看