AngularJS将数据传递给$ http.get请求
我有一个function,做一个HTTP POST请求。 代码如下所示。 这工作正常。
$http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} });
我有另一个http GET的函数,我想发送数据到该请求。 但我没有这个选项。
$http({ url: user.details_path, method: "GET", data: {user_id: user.id} });
http.get的语法是
get(url,config)
有人可以帮我弄这个吗。
HTTP GET请求不能包含要发布到服务器的数据。 但是,您可以将查询string添加到请求。
angular.http提供了一个称为params
的选项。
$http({ url: user.details_path, method: "GET", params: {user_id: user.id} });
请参阅: http : //docs.angularjs.org/api/ng.$http#get和https://docs.angularjs.org/api/ng/service/$http#usage (显示params
参数)
你可以直接传递参数给$http.get()
以下工作正常
$http.get(user.details_path, { params: { user_id: user.id } });
从AngularJS v1.4.8开始,你可以使用get(url, config)
,如下所示:
var data = { user_id:user.id }; var config = { params: data, headers : {'Accept' : 'application/json'} }; $http.get(user.details_path, config).then(function(response) { // process response here.. }, function(response) { });
对于那些有兴趣在GET请求中发送参数和头文件的解决scheme
$http.get('https://www.your-website.com/api/users.json', { params: {page: 1, limit: 100, sort: 'name', direction: 'desc'}, headers: {'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='} } ) .then(function(response) { // Request completed successfully }, function(x) { // Request error });
完整的服务示例将如下所示
var mainApp = angular.module("mainApp", []); mainApp.service('UserService', function($http, $q){ this.getUsers = function(page = 1, limit = 100, sort = 'id', direction = 'desc') { var dfrd = $q.defer(); $http.get('https://www.your-website.com/api/users.json', { params:{page: page, limit: limit, sort: sort, direction: direction}, headers: {Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='} } ) .then(function(response) { if ( response.data.success == true ) { } else { } }, function(x) { dfrd.reject(true); }); return dfrd.promise; } });
您甚至可以简单地将参数添加到url的末尾:
$http.get('path/to/script.php?param=hello').success(function(data) { alert(data); });
搭配script.php:
<? var_dump($_GET); ?>
导致以下JavaScript警报:
array(1) { ["param"]=> string(4) "hello" }
下面是在ASP.NET MVC中使用angular.js参数的HTTP GET请求的完整示例:
控制器:
public class AngularController : Controller { public JsonResult GetFullName(string name, string surname) { System.Diagnostics.Debugger.Break(); return Json(new { fullName = String.Format("{0} {1}",name,surname) }, JsonRequestBehavior.AllowGet); } }
视图:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript"> var myApp = angular.module("app", []); myApp.controller('controller', function ($scope, $http) { $scope.GetFullName = function (employee) { //The url is as follows - ControllerName/ActionName?name=nameValue&surname=surnameValue $http.get("/Angular/GetFullName?name=" + $scope.name + "&surname=" + $scope.surname). success(function (data, status, headers, config) { alert('Your full name is - ' + data.fullName); }). error(function (data, status, headers, config) { alert("An error occurred during the AJAX request"); }); } }); </script> <div ng-app="app" ng-controller="controller"> <input type="text" ng-model="name" /> <input type="text" ng-model="surname" /> <input type="button" ng-click="GetFullName()" value="Get Full Name" /> </div>
用于发送获取请求与我使用的参数
$http.get('urlPartOne\\'+parameter+'\\urlPartTwo')
通过这个你可以使用你自己的urlstring