是关于异步加载的问题

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="../css/mui.min.css">
        <style type="text/css">
            *{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <!--下拉刷新容器-->
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!--数据列表-->
                <ul class="mui-table-view mui-table-view-chevron">
                    
                </ul>
            </div>
        </div>
        <script src="../js/mui.min.js"></script>
        
        <script>
        var pageNo=1;
        var pageSize=25;
        var userId="5a07f289830f40999a11ad0b5a24ffb6";
        var newUrl = "http://百度/m/biz/issue/find?userId="+userId+"&issueState=new&pageNo="+pageNo+"&pageSize="+pageSize;
        mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
                }
            });
            /**
             * 下拉刷新具体业务实现
             */
            function pulldownRefresh() {
                setTimeout(function() {
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    for (var i = cells.length, len = i + 3; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                        
                        //下拉刷新,新纪录插到最前面;
                        table.insertBefore(li, table.firstChild);
                    }
                    mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
                }, 1000);
            }
            var count = 0;
            /**
             * 上拉加载具体业务实现
             */
            function pullupRefresh() {
                setTimeout(function() {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');
                    for (var i = cells.length, len = i + 20; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<div class="mui-media-body" id = '+ 
                                   data.data[i].id +'>'+ data.data[i].issueTitle +
                                '<p class="mui-ellipsis">'+ data.data[i].submitName +'</p>'+
                                '<h6 class="mui-ellipsis">'+ data.data[i].submitDate +'</h6>'+
                                        '</div>';
                        table.appendChild(li);
                    }
                }, 1500);
            }
            if (mui.os.plus) {
                mui.plusReady(function() {
                    setTimeout(function() {
                        mui('#pullrefresh').pullRefresh().pullupLoading();
                    }, 1000);

                });
            } else {
                mui.ready(function() {
                    mui('#pullrefresh').pullRefresh().pullupLoading();
                });
            }
            
            mui.ajax({
                type:'get',
                dataType:'json',
                url:newUrl,
                success:function(data){
                    console.log(data);
                }
            })
            
        </script>
    </body>

</html>

各位大神看一下,最后数据获取到了,但是用不了,data is not defined,是因为异步加载么,求解决办法图片描述

阅读 2.5k
2 个回答

语法不对,在函数pullupRefresh内部data变量根本就没有定义。

这样试试

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello MUI</title>
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="stylesheet" href="../css/mui.min.css">
  <style type="text/css">
    *{
      background-color: white;
    }
  </style>
</head>

<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--数据列表-->
    <ul class="mui-table-view mui-table-view-chevron">

    </ul>
  </div>
</div>
<script src="../js/mui.min.js"></script>

<script>
  var pageNo=1;
  var pageSize=25;
  var userId="5a07f289830f40999a11ad0b5a24ffb6";
  var newUrl = "http://百度/m/biz/issue/find?userId="+userId+"&issueState=new&pageNo="+pageNo+"&pageSize="+pageSize;

  /**
   * 下拉刷新具体业务实现
   */
  function pulldownRefresh() {
    setTimeout(function() {
      var table = document.body.querySelector('.mui-table-view');
      var cells = document.body.querySelectorAll('.mui-table-view-cell');
      for (var i = cells.length, len = i + 3; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';

        //下拉刷新,新纪录插到最前面;
        table.insertBefore(li, table.firstChild);
      }
      mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
    }, 1000);
  }
  var count = 0;
  /**
   * 上拉加载具体业务实现
   */
  function pullupRefresh(data) {
    setTimeout(function() {
      mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
      var table = document.body.querySelector('.mui-table-view');
      var cells = document.body.querySelectorAll('.mui-table-view-cell');
      for (var i = cells.length, len = i + 20; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<div class="mui-media-body" id = '+
          data.data[i].id +'>'+ data.data[i].issueTitle +
          '<p class="mui-ellipsis">'+ data.data[i].submitName +'</p>'+
          '<h6 class="mui-ellipsis">'+ data.data[i].submitDate +'</h6>'+
          '</div>';
        table.appendChild(li);
      }
    }, 1500);
  }
  if (mui.os.plus) {
    mui.plusReady(function() {
      setTimeout(function() {
        mui('#pullrefresh').pullRefresh().pullupLoading();
      }, 1000);

    });
  } else {
    mui.ready(function() {
      mui('#pullrefresh').pullRefresh().pullupLoading();
    });
  }

  mui.ajax({
    type:'get',
    dataType:'json',
    url:newUrl,
    success:function(data){
      console.log(data);
      mui.init({
        pullRefresh: {
          container: '#pullrefresh',
          down: {
            callback: pulldownRefresh(data)
          },
          up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
          }
        }
      });
    }
  })

</script>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题