使用angularjs发送带有数据的ajax请求 [英] Send ajax request in angularjs with data
本文介绍了使用angularjs发送带有数据的ajax请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的表格如下.在这里,我已经获取了每个元素的值,并通过ajax调用将其发送到服务器.它们是使用表格中的所有值将请求发送到服务器的任何简单方法吗?我是新手,请帮忙.我的表单有很多元素,很难获取所有元素的值,是它们的替代方法吗?
I have form like below. Here I have taken value of each element and send it to server via ajax call. Is their any easy way to send request to server using all values in form ?? I am a newbie please help. My form has a lot of element its very hard to take value of all element, is their any alternative method?
<div ng-app="Myapp">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<script>
var Myapp = angular.module('Myapp', ["ngRoute"]);
</script>
<div ng-controller="orderFormController">
Item1<input type="text" name="item1" ng-model='item1'><p></p>
Item2 <input type="text" name="item2" ng-model='item2'><p></p>
Item3 <input type="text" name="item3" ng-model='item3'><p></p>
Item4 <input type="text" name="item4" ng-model='item4'><p></p>
Item5 <input type="text" name="item5" ng-model='item5'><p></p>
<button type="button" ng-click='saveAll()' >SAVE ORDER</button>
</div>
<script>
Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
var data = {};
$scope.saveAll = function () {
data = {'item1': $scope.item1,'item2': $scope.item2,'item3': $scope.item3,'item4': $scope.item4}
$http.post("order/save/", data
).success(function (res, status, headers, config) {
if (res == 'success')
{
$scope.message = res;
}
else
{
$scope.message = res;
}
}).error(function (res, status) {
$scope.message = res;
});
}
}]);
</script>
推荐答案
在作用域上放置一个父对象,并将其属性连接到该对象.然后,父对象就是您发送的对象.
Place a parent object on the scope and wire your properties to it. The parent object is then what you send.
<div ng-app="Myapp">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<script>
var Myapp = angular.module('Myapp', ["ngRoute"]);
</script>
<div ng-controller="orderFormController">
Item1<input type="text" name="item1" ng-model='data.item1'><p></p>
Item2 <input type="text" name="item2" ng-model='data.item2'><p></p>
Item3 <input type="text" name="item3" ng-model='data.item3'><p></p>
Item4 <input type="text" name="item4" ng-model='data.item4'><p></p>
Item5 <input type="text" name="item5" ng-model='data.item5'><p></p>
<button type="button" ng-click='saveAll()' >SAVE ORDER</button>
</div>
<script>
Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
var data = {};
$scope.data = data;
$scope.saveAll = function () {
$http.post("order/save/", data
).success(function (res, status, headers, config) {
if (res == 'success')
{
$scope.message = res;
}
else
{
$scope.message = res;
}
}).error(function (res, status) {
$scope.message = res;
});
}
这篇关于使用angularjs发送带有数据的ajax请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文