angularjs中ajax请求时传递参数的方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs中ajax请求时传递参数的方法相关的知识,希望对你有一定的参考价值。

method1方法使用的是params参数,该用法会把参数直接附加到url中

method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为application/x-www-form-urlencoded类型,并且将传递的data解析为字符串,该方法会以post参数的方式传递

下面是代码部分:

<html ng-app="myApp">
<head>
<title>angularjs-ajax</title>
<script type="text/javascript" src="../../lib/ionic/js/angular/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<input type="button" value="抓取页面内容1" ng-click="method1()" /> 
<input type="button" value="抓取页面内容2" ng-click="method2()" /> 
<div style="border: 1px solid #ccc;width: 500px;height:400px;">{{content}}</div>
<script>
    var app = angular.module(myApp,[]);
    
    app.config(function($provide){
            
        $provide.factory("transFormFactory",function(){
            return {
                transForm : function(obj){
                    var str = [];  
                    for(var p in obj){  
                      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));  
                    } 
                    return str.join("&");  
                }
            };
        });
    });
    
    app.controller("ctrl",function($scope,$http,$q,transFormFactory){
        
        $scope.method1 = function() {
            $scope.url = "http://localhost:8081/Learning5/T1.action";
            $http({method:"POST",url:$scope.url,params:{msg:abc}}).success(function (data) {
                $scope.content = data;
            });
        };
        
        $scope.method2 = function() {
            $scope.url = "http://localhost:8081/Learning5/T1.action";
            $http({method:"POST",url:$scope.url,data:{msg:123},transformRequest:transFormFactory.transForm,headers:{Content-Type: application/x-www-form-urlencoded}}).success(function (data) {
                $scope.content = data;
            });
        };
    });
    </script>    
</body>
</html>

 

以上是关于angularjs中ajax请求时传递参数的方法的主要内容,如果未能解决你的问题,请参考以下文章

JQuery中$.ajax()方法参数详解 ASP.NET jquery ajax传递参数

Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)

在自动完成 AJAX 请求中传递参数

关于angularjs中ajax请求php接口参数个是转换的问题

使用ajax()方法加载服务器数据

Javascript-- jQuery Ajax应用