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

最新推荐文章于 2021-08-06 17:20:31 发布

原创最新推荐文章于 2021-08-06 17:20:31 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #ajax

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在AngularJS中实现下拉框的联动功能，包括HTML界面绑定、ng-options指令使用、ng-change事件处理及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"；就不能自动继承。