基于angular.js发送ajax请求实现前后台数据交互

1、首先在html界面中绑定一个事件

<div class="form-group pull-left" style="margin-left:0px;">
<label style="display: inline;"><span></span>{{selectDepartment.name}}</label>
<select ng-model="department" ng-change="changeDepartmentLinkageTeam(department.value)" ng-options="option as option.name for option in selectDepartment.options track by option.value" style="width: 180px;margin-left: 3px;"></select>
</div>

名词解释：ng-options表明这是一个select选择标签，

ng-change绑定的是一个onchange事件 

ng-model表示将option绑定在department中

option as option.name for option in selectDepartment.options track by option.value

option as option.name 将选择的对象与对象的名字绑定到一起

in selectDepartment.options 表明所有的下拉框选项都绑定在selectDepartment的options中

track by option.value 表明在判断的时候是按照当前选择的option的value值进行判断(默认是地址值)。

当我们在选择了某个下拉款中的值后我们选择的值存储到department中 

ng-change事件将选择的值的value属性传到方法中。

2、定义ng-change事件，通过ajax向后台发送数据

//加载change事件
$scope.changeDepartmentLinkageTeam=function (option) {
var selectTeam;
$.ajax({
method:"post",
dataType:"json",
data:{unitCode:option},
url:baseUrl + "/unit/hierarchy/group",
success:function (response) {
//将response中的参数封装成客服班组指定的数据格式
var options = new Array();
for(var i = 0; i< response.length ;i++) {
var tempData = response[i];
//将数据存储到options中
options[i] = ({name:tempData.unitName,value:tempData.unitCode});
}
//将"全部"存储到options中
options.unshift({value:"全部",name:"全部"});
selectTeam = {
name : "客服班组：",
options:options
}
}
});

return selectTeam;
};

定义事件的格式如上所示：

这里用到的return是将从ajax数据作为返回值，返回到当前定义的层中

app.service('voiceAnalysisSearchData',function () {

这个是在service层中定义一个方法，在controller层里面将service定义的参数传递到contrller中，引用使用即可

引用方式如下所示：

app.controller('customerDemandAnalysisCtrl', function($scope,voiceAnalysisSearchData)

然后将selectTeam（如上所示json格式的对象）赋值给html中定义的下拉框对象名

$scope.selectTeam = selectTeam; 这样就做到了两个下拉列表的二级联动

注意：在angular中对象能够自动继承，而字符串不能自动继承，

如果我们想要在子类中继承父类的值我们可以将字符串定义如下：

$scope.team = {};  $scope.team.value = "hello";  这样就能做到自动继承

如果直接定义 $scope.team = "hello"；就不能自动继承。