angularjs的POST

最新推荐文章于 2021-06-23 15:50:30 发布

weixin_30470857

最新推荐文章于 2021-06-23 15:50:30 发布

阅读量136

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/zhumeiming/p/9818652.html

版权

post方式  数据量大
angularjs的content-type不一样
jQuery,原生Ajax：
x-www-form-urlencoded   经典-所有服务器都认
Angularjs:  json         新潮-部分服务器默认不支持
 
 
1.从后台入手
2.前台解决
     改Angularjs库---不靠谱
     配置Anguarjs库
 
 配置Angularjs的POS方式
    1.简单的
     2.高大上-->
1.为啥POST出问题了
AngularJs想多了，摒弃了application/x-www-form-urlencoded=>application/json
 
a.改个头
$http({
url,
data,
method,
headers:{'content-type':'application/x-www-form-urlencoded'}
 
});
 
b.改内容
    $http({
         transformRequest(obj){
              return "要传输的字符串"
            }
});
 
 
   {a:12,b:5}=>"a=12&b=5"
 
 
配置angularjs：
mod.config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(){}
$httpProvider.defaults.post['Content-Type']='application/x-www-form-urlencoded'
})

给出代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs中的$http.post()</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body ng-app="myApp">

    <!--post方式  数据量大-->
    <!--angularjs的content-type不一样
    jQuery,原生Ajax：
    x-www-form-urlencoded   经典-所有服务器都认
    Angularjs:  json         新潮-部分服务器默认不支持


    1.从后台入手
    2.前台解决
         改Angularjs库---不靠谱
         配置Anguarjs库

     配置Angularjs的POS方式
        1.简单的
         2.高大上-->
    <!--1.为啥POST出问题了
    AngularJs想多了，摒弃了application/x-www-form-urlencoded=>application/json

    a.改个头
    $http({
    url,
    data,
    method,
    headers:{'content-type':'application/x-www-form-urlencoded'}

    });

    b.改内容
        $http({
             transformRequest(obj){
                  return "要传输的字符串"
                }
    });


       {a:12,b:5}=>"a=12&b=5"


    配置angularjs：
    mod.config(function($httpProvider){
    $httpProvider.defaults.transformRequest=function(){}
    $httpProvider.defaults.post['Content-Type']='application/x-www-form-urlencoded'
    })-->




    <div ng-controller="main">
        <input type="text" ng-model="a" />
        <input type="text" ng-model="b" />
        <input type="button" value="计算" ng-click="calc()" />
    </div>



    <script type="text/javascript">
        angular.module("myApp", [])
            .controller("main", ["$scope", "$http", function ($scope, $http) {


                $scope.calc = function () {
                    $http({
                        method: 'POST',
                        url: 'Handler1.ashx',
                        data: {
                            a: $scope.a,
                            b: $scope.b
                        },
                        headers: { 'content-type': 'application/x-www-form-urlencoded' },
                        transformRequest: function (obj) {
                            let arr = [];
                            for (let name in obj) {
                                arr.push(`${name}=${obj[name]}`);
                            }
                            return arr.join('&');

                        }
                    }).then((res) => {
                        alert(res.data);
                    }, (err) => {
                        alert("失败了");
                    });

                }

            }])

    </script>

</body>
</html>

Handler1.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication5
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            //context.Response.Write("Hello World");


            context.Response.ContentType = "text/html";

            string a = context.Request["a"];
            string b = context.Request["b"];
            var c = Convert.ToInt32(a) + Convert.ToInt32(b);

            context.Response.Write(c);//根据当前电脑的硬件编号+系统时间微秒数
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

配置后的angularjs的post的写法:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>angularjs中的$http.post()</title>
    <script src="https://cdn.staticfile.org/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body ng-app="myApp">


    <div ng-controller="main">
        <input type="text" ng-model="a" />
        <input type="text" ng-model="b" />
        <input type="button" value="计算" ng-click="calc()" />
    </div>



    <script type="text/javascript">
        let mod = angular.module("myApp", []);
        mod.config(function ($httpProvider) {
            $httpProvider.defaults.transformRequest = function (obj) {
                let arr = [];
                for (let name in obj) {
                    arr.push(`${name}=${obj[name]}`);
                }
                return arr.join('&');

            };

            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
         });
        mod.controller("main", ["$scope", "$http", function ($scope, $http) {


                $scope.calc = function () {
                    $http({
                        method: 'POST',
                        url: 'Handler1.ashx',
                        data: {
                            a: $scope.a,
                            b: $scope.b
                        }
                       
                    }).then((res) => {
                        alert(res.data);
                    }, (err) => {
                        alert("失败了");
                    });

                }

            }])

    </script>

</body>
</html>

转载于:https://www.cnblogs.com/zhumeiming/p/9818652.html

weixin_30470857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs的POST

post方式数据量大angularjs的content-type不一样jQuery,原生Ajax：x-www-form-urlencoded经典-所有服务器都认Angularjs:json新潮-部分服务器默认不支持 1.从后台入手2.前台解决改Angularjs库---不靠谱配置Anguarjs库 ...
复制链接

扫一扫