我是AngularJS的新手,一开始,我想只使用AngularJS开发一个新的应用程序。
我正在尝试使用我的Angular App中的$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);
});
这是有效的,但它在$.param
上也使用jQuery。为了消除对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会提供这个功能,但是如何?
我认为您需要做的是将数据从对象转换为JSON字符串,而不是转换为url params。
默认情况下,$ http服务将通过将数据序列化为JSON来转换传出请求,然后使用内容类型“application / json”发布它。当我们想要将值作为FORM帖子发布时,我们需要更改序列化算法并使用内容类型“application / x-www-form-urlencoded”发布数据。
例子from here。
$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添加的新服务,请参阅
$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);
});
这对我有用。我使用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 data JSON_CALLBACK({“username”:“Victoria”,“password”:“password”,“callback”:“JSON_CALLBACK”}); httpTesting.js:18个头函数(c){a ||(a = sc(b));返回c?a [K(c)] || null:a}
有一个名为邮递员的铬扩展名。您可以使用它来测试您的后端URL是否正常工作。 https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en
希望,我的回答会对你有所帮助。
使用AngularJS 1.4及更高版本,两个服务可以处理POST请求的url编码数据流程,无需使用transformRequest
或使用外部依赖项(如jQuery)来操作数据:
$httpParamSerializerJQLike
- 受jQuery的.param()
启发的序列化器(推荐)$httpParamSerializer
- Angular本身用于GET请求的序列化程序用法示例
$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 */ });
$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
所有这些看起来像是矫枉过正(或不起作用)......只需这样做:
$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
"&password=" + encodeURIComponent(password) +
"&grant_type=password"
).success(function (data) {
问题是JSON字符串格式,您可以在数据中使用简单的URL字符串:
$http({
method: 'POST',
url: url,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});
这是应该的方式(并且请不要后端改变......当然不是......如果你的前堆栈不支持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的魅力一样
人们,请给我一些建议:
.then(success, error)
时使用promises $http
,忘记.sucess
和.error
回调(因为它们被弃用)如果您的数据模型更复杂,只有用户名和密码,您仍然可以这样做(如上所述)
$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
的文件可以找到here
如果是表单,请尝试将标题更改为:
headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";
如果它不是一个表单和一个简单的json,那么尝试这个标题:
headers[ "Content-type" ] = "application/json";
从$http文档,这应该工作..
$http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
.success(function(response) {
// your code...
});
你需要发布普通的javascript对象,没有别的
var request = $http({
method: "post",
url: "process.cfm",
transformRequest: transformRequestAsFormPost,
data: { id: 4, name: "Kim" }
});
request.success(
function( data ) {
$scope.localData = data;
}
);
如果你有PHP作为后端然后你将需要做一些更多的修改..结帐this link修复php服务器端
虽然是一个迟到的答案,我发现角度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();