使用AngularJS绑定ajax返回的数据

最近在学习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方法,这里就不做讨论了。
写本文一是分享心得,二是怕自己以后忘记,如果不能为您提供帮助,请另寻贵资!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态数据绑定是指在页面加载完成后,通过Ajax请求获取数据,然后将数据与页面元素进行绑定,实现数据的动态展示。 在实现动态数据绑定的过程中,可以使用jQuery等前端框架来简化操作。以下是一个基本的示例: 1. 在页面中创建一个用于展示数据的容器,例如一个`<div>`元素。 2. 使用jQuery的`$.ajax()`方法发送Ajax请求,指定请求的URL、请求类型、数据格式等参数。 3. 在Ajax请求成功后的回调函数中,处理返回数据。可以使用`$.each()`方法遍历数据,并将每个数据项动态地添加到页面中。 4. 将数据绑定到页面元素上,可以使用jQuery的`text()`、`html()`或`val()`方法来设置元素的文本内容、HTML内容或表单值。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <title>动态数据绑定示例</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="dataContainer"></div> <script> $(document).ready(function() { $.ajax({ url: 'data.json', // 请求的URL type: 'GET', // 请求类型 dataType: 'json', // 数据格式 success: function(data) { // 数据请求成功后的回调函数 $.each(data, function(index, item) { // 遍历数据并将每个数据项添加到页面中 $('#dataContainer').append('<p>' + item + '</p>'); }); }, error: function() { // 数据请求失败时的回调函数 alert('数据加载失败'); } }); }); </script> </body> </html> ``` 上述示例中,通过Ajax请求加载一个名为`data.json`的JSON数据文件,并将每个数据项动态地添加到页面中的`dataContainer`容器中。 需要注意的是,示例中的`data.json`文件应该存在,并且返回数据格式应为JSON格式。你可以根据实际需求修改示例代码中的URL、数据处理逻辑等部分。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值