AngularJS 如何在不使用 jQuery 的情况下通过 $http 发送 POST 请求来提交 urlencoded 表单数据?

我是 AngularJS 的新手，我想只用 AngularJS 开发一个新的应用程序。

我正在尝试从我的 Angular 应用中使用 $http 对服务器端进行 AJAX 调用。

为了发送参数，我尝试了以下方法:

$http({
method: "post",
url: URL,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
console.log(result);
});

上面的代码能行，但它使用了 jQuery 以及 $.param。为了移除对 jQuery 的依赖，我尝试了如下代码: 

data: {username: $scope.userName, password: $scope.password}

但这似乎不起作用。然后我尝试了params:

params: {username: $scope.userName, password: $scope.password}

但这似乎也失败了。然后我尝试了 JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

我找到了这些可能的答案，但没有成功。我做错什么了吗? 我确信用 AngularJS 能实现这个功能，但是怎么做呢?

288274 次浏览
小开

在http美元文档中，这应该可以工作。

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.success(function(response) {
// your code...
});
小开

如果它是一个表单，尝试将标题更改为:

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

如果它不是一个表单和一个简单的json，那么试试这个头:

headers[ "Content-type" ] = "application/json";
小开
最佳答案

我认为你需要做的是转换你的数据从对象不是JSON字符串，而是url参数。

来自本·纳德尔的博客。

缺省情况下，$http服务将通过 将数据序列化为JSON，然后将其与内容一起发布 类型,“应用程序/ json"。当我们想要将值作为FORM发布时 Post，我们需要改变序列化算法并发布数据 使用content-type，“application/x-www-form-urlencoded"

从这里示例。

$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
},
data: {username: $scope.userName, password: $scope.password}
}).then(function () {});

更新

要使用AngularJS V1.4中添加的新服务，请参见

小开

你需要post纯javascript对象，别无其他

           var request = $http({
method: "post",
url: "process.cfm",
transformRequest: transformRequestAsFormPost,
data: { id: 4, name: "Kim" }
});


request.success(
function( data ) {
$scope.localData = data;
}
);

如果你有PHP作为后端，那么你将需要做一些更多的修改。checkout 这个链接用于修复php服务器端

小开

这对我很管用。前端使用angular，后端使用laravel php。在我的项目中，angular web将json数据发送到laravel后端。

这是角控制器。

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {


$scope.userName ="Victoria";
$scope.password ="password"




$http({
method :'POST',
url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
data: { username :  $scope.userName , password: $scope.password},
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log('status',status);
console.log('data',status);
console.log('headers',status);
});


});

这是我的php后端laravel控制器。

public function httpTest(){
if (Input::has('username')) {
$user =Input::all();
return  Response::json($user)->setCallback(Input::get('callback'));
}
}

这是我的laravel路由

Route::post('httpTest','HttpTestController@httpTest');

浏览器中的结果是

200 < br > < p >状态 数据JSON_CALLBACK({“用户名”:“维多利亚”,“密码”:“密码”,“回调”:“JSON_CALLBACK”}); httpTesting.js:18 headers function (c){a||(a=sc(b)) c ? (K (c)) | |零:一个}< / p >
有一个chrome扩展叫做邮递员。您可以使用测试您的后端url是否工作。 https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en < / p >

希望我的回答能帮到你。

小开

所有这些看起来都太过了(或者根本没用)……只要这样做:

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
`&password=${ encodeURIComponent(password) }` +
'&grant_type=password'
).success(function (data) {
小开

只使用AngularJS服务的url编码变量

在AngularJS 1.4及以上版本中，有两个服务可以处理POST请求的url编码数据，无需使用transformRequest或使用jQuery等外部依赖项来操作数据:

  1. < >强$httpParamSerializerJQLike < / >强 -一个受jQuery的.param() (推荐)启发的序列化器

  2. < >强$httpParamSerializer < / >强——Angular自己用于GET请求的序列化器

$http()的示例

$http({
url: 'some/api/endpoint',
method: 'POST',
data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
}
}).then(function(response) { /* do something here */ });

< a href = " http://plnkr.co/edit/UJRolpqzxWDBBNtlEChD?p=preview" rel="nofollow noreferrer">查看更详细的Plunker演示 . p=preview" rel="nofollow noreferrer">

$http.post()的示例

$http.post(
'some/api/endpoint',
data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
}
}
).then(function

$httpParamSerializerJQLike和$httpParamSerializer有什么不同

一般来说，$httpParamSerializer似乎使用较少的“传统”;当涉及到复杂的数据结构时，url编码格式比$httpParamSerializerJQLike更好。

例如(忽略括号中的百分比编码):

•对数组编码

{sites:['google', 'Facebook']} // Object with array property


sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike


sites=google&sites=facebook // Result with $httpParamSerializer

•对对象进行编码

{address: {city: 'LA', country: 'USA'}} // Object with object property


address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike


address={"city": "LA", country: "USA"} // Result with $httpParamSerializer
小开

问题是JSON字符串格式，你可以在数据中使用一个简单的URL字符串:

$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});
小开

虽然是一个很晚的答案，但我发现angular UrlSearchParams对我来说工作得很好，它也处理了参数的编码。

let params = new URLSearchParams();
params.set("abc", "def");


let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();
小开

这是它应该是(请没有后端更改…当然不是……如果你的前端堆栈不支持application/x-www-form-urlencoded，那么把它扔掉…希望AngularJS能做到!

$http({
method: 'POST',
url: 'api_endpoint',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'username='+$scope.username+'&password='+$scope.password
}).then(function(response) {
// on success
}, function(response) {
// on error
});

AngularJS 1.5非常好用

朋友们，让我给你们一些建议:

  • 在处理$http时使用promises .then(success, error)，忘记.sucess和.error回调(因为它们已被弃用)

  • 从angularjs站点here "你不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值应该放在哪里。"

如果您的数据模型比用户名和密码更复杂，您仍然可以这样做(如上所述)

$http({
method: 'POST',
url: 'api_endpoint',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: json_formatted_data,
transformRequest: function(data, headers) {
return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
}
}).then(function(response) {
// on succes
}, function(response) {
// on error
});

encodeURIComponent的文档可以在在这里中找到

小开 
$http({


method: "POST",
url: "/server.php",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
data: "name='Олег'&age='28'",




}).success(function(data, status) {
console.log(data);
console.log(status);
});

提交答案