zoukankan      html  css  js  c++  java
  • 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; 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>
  • 相关阅读:
    java包装类的缓存机制(转)
    分布式事务的思考(转)
    分布式事务框架介绍与使用案例
    java 内部类、匿名内部类
    spring cloud应用
    Oralce学习笔记(六)
    部署CentOS虚拟机集群
    商品详情页系统架构
    Oracle学习笔记(五)
    hystrix完成对redis访问的资源隔离
  • 原文地址:https://www.cnblogs.com/modou/p/5869292.html
Copyright © 2011-2022 走看看