AngularJS 发送POST请求到后台

最新推荐文章于 2023-03-04 07:55:28 发布

JaceyV5

最新推荐文章于 2023-03-04 07:55:28 发布

阅读量7.6k

点赞数 1

文章标签： angularjs

本文链接：https://blog.csdn.net/JaceyV5/article/details/52294295

版权

这两个周公司要换前端框架,采用Ionic + AngularJS来展示App 原来的App采用的是H5做的,说是H5用户体验不怎么好,所以叫我调研下,说真的,刚开始真的是一脸懵逼,找各种资料,论坛,视频,看了很多博客很多大牛都说学习Ionic必须得有AngularJS的基础,否则难以入手。事实也证明,还真的要有AngularJS的基础,所以要是有道友想学习用Ionic做移动端的话,得打好AngularJS的基础,好了,下面进入正题。

用Ionic跟后台交互,后端语言可以用PHP、Java等,跟语言没多大关系,熟悉用哪门语言就用哪种语言开发,首先你得把页面进行衔接起来,然后再想着怎么传递数据到后台，就比如你的html或jsp总得让它页面之间进行跳转吧,在AngularJS中,所有的这种跳转都是有路由来进行控制的,但是不能进行页面嵌套,所以就有了ui-router这个东西,当然 AngularJS2版本的已经改进了许多,在做测试的时候就用了登录这个进行测试,想真正的把我的用户名和密码从数据库进行匹配,却发现,提交数据的时候,请求是到了后台地址,但是确是个JSON格式例如：

[
    {
        key1:value1,
        key2:value2 
    },
    {
         key3:value3,
         key4:value4   
    }
]

这种形式传入的后台,后来在博客中看到一位前辈说的是因为 Angular的默认请求头就是

$httpProvider.defaults.headers.post: (header defaults for POST requests)

Content-Type: application/json

$httpProvider.defaults.headers.put(header defaults for PUT requests)

Content-Type: application/json

这个是angularjs中的源码：

app.config(function($httpProvider) {

$httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

});

就是因为这个默认的请求头post不像ajax那样传入的,而是传入了一组json数据过去,所以只能修改他的配置：在app.js中

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function(obj) {
      var query = '';
      var name, value, fullSubName, subName, subValue, innerObj, i;

      for (name in obj) {
        value = obj[name];

        if (value instanceof Array) {
          for (i = 0; i < value.length; ++i) {
            subValue = value[i];
            fullSubName = name + '[' + i + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value instanceof Object) {
          for (subName in value) {
            subValue = value[subName];
            fullSubName = name + '[' + subName + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value !== undefined && value !== null) {
          query += encodeURIComponent(name) + '='
            + encodeURIComponent(value) + '&';
        }
      }
      return query.length ? query.substr(0, query.length - 1) : query;
    };
    return angular.isObject(data) && String(data) !== '[object File]'
      ? param(data)
      : data;
  }];
});