From $.ajax () in jquery to the $http of Angularjs

The use of Ajax in jquery is a lot of encapsulation, so that we use the habit, but not very clear in the request process some details.

When using Angularjs's $http for the first time, the background has not received the data of the front-end request, so a little research.

On my own side of the project as an example, the way to accept the background service is through the HttpContext.Request.Params, the original Ajax request in jquery has been normal, a change to the original $http, the moment rushed to collapse ....

If you use the most original $http, you will find that the request data format of the network in Google is:

The data format that was previously used for normal access is:

In contrast, two questions are found:

1. The location of the data in the request body is not the same,

2. Data format is not the same

So the relevant research, the conclusion is as follows

The default content-type for $.ajax () in 1.jquery is "application/x-www-form-urlencoded", which puts the requested data into the request body, which appears in form data.

$http, the default should be "Text/plain;charset=utf-8", which will put the requested data into the request payload.

Ps. The difference between Get and post is whether the requested data is appended to the URL.

Data sent to the server in 2.jquery is automatically converted to a format similar to &FOO=BAR1&FOO=BAR2, which is then parsed by the server side according to the appropriate format. And there's no such automatic conversion in $http,

You need to do this format conversion action yourself.

The code is as follows:

Boot module
var app = Angular.module (' app ', [
Dependent modules
], 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;
}];

});

The red text is the format conversion feature that we need to add.

Attach the request original data format:

If you add the above conversion code to the server-side request, you will find that the attribute fields are & separate. If not, then not the server side can not parse.

From $.ajax () in jquery to the $http of Angularjs