使用AngularJS绑定ajax返回的数据

最新推荐文章于 2021-08-06 04:56:59 发布

原创最新推荐文章于 2021-08-06 04:56:59 发布 · 466 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS绑定Ajax返回的数据失败

html随笔记录专栏收录该内容

7 篇文章

订阅专栏

本文分享了在AngularJS项目中使用AJAX获取数据并绑定到下拉框的实战经验，解决了异步请求导致的绑定失败问题，通过将AJAX调用移至AngularJS控制器中实现数据实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习AngularJS，感觉AngularJS绑定数据确实方便，于是尽快用到项目中，我绑定的是一个下拉框：通过ajax获取数组，将ajax返回的数据绑定到下拉框上，自动生成下拉列表，但是中间遇到了绑定失败的问题，如下是我的解决思路（不再贴运行效果图，只提供解决问题的思路，以作参考）
错误绑定代码如下：

   $(function () {
        var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
                $scope.names = JSON.parse(GetArray());
                $scope.seconds = JSON.parse(GetArray());
            })
        })
        function GetArray() {
            var obj = {
                NameSpace_name: sessionStorage["NameSpace"]
            };
            $.ajax({
                type: 'post',
                url: "../../Model/Test",
                contentType: 'application/json',
                data: JSON.stringify(obj),
                async: false,
                success: function (data) {
                    return data;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*jqXHR对象的信息*/
                    console.log('jqXHR.responseText --> ', jqXHR.responseText);
                    console.log('jqXHR.status --> ', jqXHR.status);
                    console.log('jqXHR.readyState --> ', jqXHR.readyState);
                    console.log('jqXHR.statusText --> ', jqXHR.statusText);
                    /*其他两个参数的信息*/
                    console.log('textStatus --> ', textStatus);
                    console.log('errorThrown --> ', errorThrown);
                }

            });
        }

这样的绑定会出问题的，一是ajax是异步的，当AngularJS中元素绑定数值时，此时ajax返回值还为null，将ajax设置成同步也不行（具体原因正在找）,此时我们可以将ajax放到AngularJS中controller的function中执行：

<script type="text/javascript">
        var models;
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            var obj = {
                NameSpace_name: sessionStorage["NameSpace"]
            };
            $.ajax({
                type: 'post',
                url: "../../Model/Test",
                contentType: 'application/json',
                data: JSON.stringify(obj),
                async: false,
                success: function (data) {
                    $scope.names = JSON.parse(data);
                    $scope.seconds = JSON.parse(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*jqXHR对象的信息*/
                    console.log('jqXHR.responseText --> ', jqXHR.responseText);
                    console.log('jqXHR.status --> ', jqXHR.status);
                    console.log('jqXHR.readyState --> ', jqXHR.readyState);
                    console.log('jqXHR.statusText --> ', jqXHR.statusText);
                    /*其他两个参数的信息*/
                    console.log('textStatus --> ', textStatus);
                    console.log('errorThrown --> ', errorThrown);
                }

            });

           
        });


    </script>

绑定成功。
最后提醒，绑定的数据类型如果是数组，需转化为JSON对象。
当然通过AngularJS绑定数据时，还可以使用AngularJS自带的$http方法，这里就不做讨论了。
写本文一是分享心得，二是怕自己以后忘记，如果不能为您提供帮助，请另寻贵资！