• 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";  

    显示效果:

     

  • 相关阅读:
    线性反馈系统
    静磁场
    平面波的传播
    Partition does not end on cylinder boundary
    FFTW简介及使用
    EINTR、ERESTARTSYS和SIGINT
    凉面
    linux Shell编程
    Linux From Scratch [2]
    Linux From Scratch [1]
  • 原文地址:https://www.cnblogs.com/yangyanfei/p/6423851.html
Copyright © 2020-2023  润新知