<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
   <style type="text/css">
   div#slider-img {width: 100%; height: 250px; top: 45px;}
   </style>
    <script type="text/javascript" charset="UTF-8">
      mui.init();
    </script>
    <script src="js/jquery-1.12.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
       mui.init();
       mui.plusReady(function(){
           mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore',{
           dataType:'json',
           type:'get',//请求方式
           timeout:10000,//超时
           success:function(data){//成功
            dataAnalyze(data);
            },
            error:function(error){//失败
               console.log("返回失败");
             }
          });
        mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/30-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR/Msg7TLJv5TjaQQ6Hpjxd+aWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985878&sign=oDwq9mBweKUtUuiS/PvB015PyTDKHSxuyuVq2076XQB48ErR02zJ6/KXOnxX046I&encryption=1&canal=appstore',{
        dataType:'json',type:'get',timeout:10000, success:function(data){
        listDataAnalyze(data);
        },error:function(error){
        console.log("返回失败"+ error);
        }
        });
  });
 
function dataAnalyze(data){
    var arr = data.T1348647853363[0].ads;
    var finalList = null;
    var imgList = null;
    for(var i = 0; i<arr.length;i++){
     //轮播图标签结构
//    finalList = '<div class="mui-slider-item"><a href="http://www.baidu.com"><p class="mui-slider-title">'+arr[i].title+'</p> </a></div>'
finalList = '<div class="mui-slider-item"><a href="#"><img src='+arr[i].imgsrc+'></a></div>';
     //插入slider-img标签里面
      $("div#slider-img").append(finalList);
     //插入轮播标记
     $("#slider-indicator").append('<div class="mui-indicator"></div>');
//     插入完成必须初始化，否则图片不能滚动
     mui('.mui-slider').slider({
     interval:0//自动轮播周期，若为0则不自动播放，默认为0；
      });                  
    }
}
 
function listDataAnalyze(data) {
var listDetail = null;
var arrayobj = data.T1348647853363;
for (var i = 0; i < arrayobj.length;i++) {
console.log(arrayobj[i].title);
listDetail = '<li class="mui-table-view-cell mui-media><a href="#"><div class="mui-media-body">'+arrayobj[i].digest+'</div></a>></li>';
$("#tableView-List").append(listDetail);
}
}
 
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">aJax请求数据</h1>
</header>
 
  <div class="mui-slider " >
            <div class="mui-slider-group" id="slider-img">
              //图片、标题
            </div>
            <!--注意这里面是图片滚动的标记，div的数量要和上面的匹配-->
            <div class="mui-slider-indicator" id="slider-indicator">
            </div>
  </div>
<ul class="mui-table-view" id="tableView-List">
</ul>
</body>
</html>

在mui中创建aJax来请求数据..并展示在页面上的更多相关文章

  1. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  2. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  3. 09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串

    cmd下安装axios npm install axios 安装好后,会多出node_modules文件夹 思路: 监听data里的word改变时,发送ajax异步请求数据, 把返回的数据赋值给dat ...

  4. ajax异步刷新请求数据

    AJAX是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新.AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XM ...

  5. jQuery的deferred对象使用详解——实现ajax线性请求数据

    最近遇到一个ajax请求数据的问题 ,就是想要请求3个不同的接口,然后请求完毕后对数据进行操作,主要问题就是不知道这3个请求誰先返回来,或者是在进行操作的时候不能保证数据都已经回来,首先想到能完成的就 ...

  6. 使用gulp创建ajax模拟请求

    概述 之前一直使用gulp构建前端项目,这个基于node流并崇尚“编程而非配置”的工具让我深深的爱上了他.强大的gulp能做到的不仅仅是压缩和合并js.css,它能做到的还有更多.今天我给大家带来使用 ...

  7. Struts2中通过Ajax传递json数据

    1.导入Struts2所需要的jar包 下载Struts2的jar包时,可以下载struts-2.5.13-min-lib.zip,然后放到项目的/WebContent/WEB-INF/lib路径下s ...

  8. 微信返回上一页，页面中的AJAX的请求，对Get请求无效的解决办法

    问题产生原因       最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...

  9. 解决ajax异步请求数据后swiper不能循环轮播(loop失效)问题、滑动后不能轮播的问题。

    问题描述: 1.我使用axios异步请求后台的图片进行渲染后不能实现循环轮播,也就是loop失效,但是静态写死的情况下不会出现这种问题. 2. 分析: swiper的机制是:初始化的时候将swiper ...

随机推荐

  1. PHP与apache配置

    在apache 的安装路径中找到 \conf\httpd.conf文件 在 LoadModule最后面添加如下代码: PHPIniDir "D:\PHP"LoadModule ph ...

  2. Python——序列

    #!/usr/bin/python #coding:utf8 ''' Python——序列 字符串的操作 ''' s = 'abcdefg' print s print s[2] print s[-1 ...

  3. linux下的计算器

    (1)bc bc在默认的情况下是个交互式的指令.在bc工作环境下,可以使用以下计算符号:+ 加法 - 减法 * 乘法 / 除法 ^ 指数 % 余数如: 3+4;5*2;5^2;18/4      &l ...

  4. Appium学习路-安装篇

    比较好的文章:http://www.15yan.com/story/4GbuTwXQKDU/ 官网资料:http://appium.io/slate/cn/v1.2.0/?python#appium ...

  5. LocalDateTime json格式化

    参考https://www.cnblogs.com/xiaozhang9/p/jackson.html?utm_source=itdadao&utm_medium=referral <d ...

  6. 给出一个十六进制的数0xFF 0x80 （只有2“位”） 将其转换成有符号的一字节的十进制整数

    #include <stdio.h>#include<iostream>#include <stdlib.h>#include<string.h>usi ...

  7. 二叉树的层次遍历 · Binary Tree Level Order Traversal

    ［抄题］: 给出一棵二叉树,返回其节点值的层次遍历(逐层从左往右访问) ［思维问题］: ［一句话思路］: 用queue存每一层 ［输入量］:空: 正常情况:特大:特小:程序里处理到的特殊情况:异常情况 ...

  8. Future设计模式

    一.什么是Future模型: Future模式是多线程开发中非常常见的一种设计模式,它的核心思想是异步调用.这类似我们网上订餐订座,只要一个电话,客服就告诉我们已经预定成功(实际客服MM啥都还没做好) ...

  9. 4.n的高精度阶乘---优化

    题目:对于每组测试数据,在一行中给出一非负整数n(n小于等于100) 样例输入 3 5 10 样例输出 6 120 3628800 超时的代码如下:#include <iostream># ...

  10. Bootstrap模态框使用WebUploader点击失效问题解决

    解决 方法一 在上传按钮上监听一个点击事件,如create(),在该函数中重新生成上传按钮 function create(){ uploader.addButton({ id: '#filePick ...