zoukankan      html  css  js  c++  java
  • 从jquery里的$.ajax()到angularjs的$http

    jquery中对ajax的使用做了很多封装,使得我们使用习惯了,反而并不大清楚在请求过程中的一些细节。

    在第一次使用angularjs的$http时,后台一直接受不到前端请求的数据,于是小小研究了一下。

    用我自己这边的项目为例,后台服务这边接受请求的方式是通过HttpContext.Request.Params来,原来用jquery中的Ajax请求一直正常,一换到原始的$http,瞬间奔溃啦。。。。

    如果使用最原始的$http,会发现谷歌中network的请求数据格式是:

    而以前使用正常的访问下数据格式为:

    对比时会发现两个问题:

    1.数据在请求体中的位置不一样、

    2.数据格式不一样

    于是做的相关研究,结论如下

    1.jquery中的$.ajax()默认Content-Type为“application/x-www-form-urlencoded”,这个设置会把请求的数据放到请求体中,即在Form Data中出现。

       $http的话,默认的应该是“text/plain;charset=UTF-8”,这个设置会把请求的数据放到Request Payload中。

    ps.Get 和Post的区别是请求的数据是否附加到url后面。

    2.jquery中发送到服务器的数据会自动转换成类似 &foo=bar1&foo=bar2的格式,然后服务器端根据相应的格式来解析。而$http里是没有这种自动转换的,

    需要自己做这个格式转换动作。

    代码如下:


    //启动模块
    var app = angular.module('app', [
    //依赖模块
    ], function ($httpProvider) {
    var param = function (obj) {
    var query = '', 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;
    };
    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [function (data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];

    });

    红色文字即我们需要添加的格式转换功能。

    附上请求原数据格式:

     

    服务器端请求时如果加上上面那段转换代码,会发现属性字段之间是&分开的。如果没有的话,则不是的话,服务器端没法解析。

  • 相关阅读:
    ps制作gif
    安装pycocotools错误
    labelimg最新版本的使用攻略
    1_0day安全漏洞分析技术学习_二进制文件概述_笔记
    2.陈治瑄问题,汉字写入数据库报错。这个汉字有什么特殊的吗?
    1.PHP中报出use of undefined constant count
    [转] 关于Multi-head的为什么
    [转] GPT、GPT-2到GPT-3概览
    [转] RoBERTa介绍
    [转] ELMo原理解析及简单上手使用
  • 原文地址:https://www.cnblogs.com/xuezhi/p/4829431.html
Copyright © 2011-2022 走看看