开始总结自己在项目上的使用AJAX的情况:

  该图为向后台请求的数据,前台返回的结果,返回的数据类型为object,businessObj由许多key组成,我们项目前台需要调用的数据就藏在数组records中,可以通过

   var records=data['businessObj']['records'];

   将records打印出来,输出的内容为一个数组(我们项目中数组长度为1,项目初期,内容有点少,/(ㄒoㄒ)/~~~),每个数组又是由一个对象组成。

  下面上代码喽!!!!!!!!!!!!!!!!!!

 1         var count = 0;
2 /**
* 上拉加载具体业务实现
*/
// var n=1;
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > <?php echo $page?$page:0?>)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-table-view');
var cells = document.body.querySelectorAll('.mui-table-view-cell');
// var len=10; var res=[];
$.ajax({
url: '__CONTROLLER__/messageAjax',
type: 'post',
dataType: 'json',
data: {pageIndex: count,type:'activity'},
})
.done(function(data) { var records=data['businessObj']['records'];
console.log(records); var len=records.length;
for (var i = 0; i < len; i++) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.className = 'mui-table-view-cell';
li.innerHTML += '<p class="hdate">'+records[i]['sendTime']+'</p>'
                  //首先进行判断,是否含有h5URL链接,如果含有,再判断是否是已读的(1状态),再用字符串拼接的方法进行代码连接,在前台页面显示title、图片
if(records[i]['h5URL']){
if (records[i]['readStatus']==1) { li.innerHTML += '<a href= "'+records[i]['h5URL']+'?recordId='+records[i]['recordId']+'" recordid="'+records[i]['recordId']+'"><div class="hcon"><div class="hconW"><h2 class="fgrey">'+records[i]["title"]+'</h2><div class="bgblue"><img src='+records[i]['imgSrc']+'></div>'+'<p class="note" style="color:#999999;">'+records[i]['content']+'</p>'+'<p class="ckxq">查看详情<span class="seltarr2 fr mt10"></span></p></div></div></a>';
}else{
li.innerHTML += '<a href="'+records[i]['h5URL']+'?recordId='+records[i]['recordId']+'" recordid="'+records[i]['recordId']+'"><div class="hcon"><div class="hconW"><h2>'+records[i]["title"]+'</h2><div class="bgblue"><img src='+records[i]['imgSrc']+'></div>'+'<p class="note" style="color:#999999;">'+records[i]['content']+'</p>'+'<p class="ckxq">查看详情<span class="seltarr2 fr mt10"></span></p></div></div></a>'; }
}
                  //如果没有h5URL链接,对应就没有要显示的图片,显示对应的content就好
                   else{
if (records[i]['readStatus']==1) {
li.innerHTML += '<a onclick="updatestatus('+records[i]['recordId']+','+'/account/message/atDeatail/type/activity/recordId/'+records[i]['recordId']+')"><div class="hcon"><div class="hconW"><h2 class="fgrey">'+records[i]["title"]+'</h2><div class="bgblue"><img src='+records[i]['imgSrc']+'></div>'+'<p class="note" style="color:#999999;">'+records[i]['content']+'</p>'+'<p class="ckxq">查看详情<span class="seltarr2 fr mt10"></span></p></div></div></a>';
}else{
li.innerHTML += '<a onclick="updatestatus('+records[i]['recordId']+','+'/account/message/atDeatail/type/activity/recordId/'+records[i]['recordId']+')"><div class="hcon"><div class="hconW"><h2>'+records[i]["title"]+'</h2><div class="bgblue"><img src='+records[i]['imgSrc']+'></div>'+'<p class="note" style="color:#999999;">'+records[i]['content']+'</p>'+'<p class="ckxq">查看详情<span class="seltarr2 fr mt10"></span></p></div></div></a>';
}
}
                  //最后将生成的li添加到页面中
$("#va").append(li);
}
// console.log(li);
})
.fail(function() {
return ;
})
.always(function() {
console.log("complete");
}); }, 1500); }

AJAX第二发的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug,JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

随机推荐

  1. SSAS动态添加分区 (转载)

    一.动态分区的好处就不说了,随着时间的推移,不可能一个度量值组都放在一个分区中,处理速度非常慢,如何动态添加分区,如何动态处理分区,成为了很多新手BI工程师一个头痛的问题,废话不多说,分享一下我的经验 ...

  2. Oracle新表使用序列(sequence)作为插入值,初始值不是第一个,oraclesequence

    Oracle新表使用序列(sequence)作为插入值,初始值不是第一个,oraclesequence 使用oracle11g插入数据时遇到这样一个问题: 1 --创建测试表-- 2 CREATE T ...

  3. 20145227&20145201 《信息安全系统设计基础》实验四

    北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)鄢曼君 李子璇 学号:(按贡献大小排名)20145227 20145201 成绩: ...

  4. 【转】创建SVN仓库的步骤

    转载地址:http://www.cnblogs.com/ivan0626/p/3783053.html   今天在客户现场联调,两个开发人员之间的代码想用SVN来管理,所以就临时在本地机器上搭建一个S ...

  5. fiddler如何修改request header

    在命令行中输入命令:  bpu www.baidu.com   (这种方法只会中断www.baidu.com) 然后刷新网站,在fiddler中点击被打断的网址,点击Inspectors—>Ra ...

  6. 一个 div 实现扇形图(锥形渐变)

    需要引用的js文件<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min ...

  7. Mac中安装node.js和npm

    换了Mac需要安装noed.js和npm记录一下首先访问node.js官网(https://nodejs.org/en/download/) 点击下载完后,一路点安装 就安装完成了 然后打开-终端-输 ...

  8. 0.[WP Developer体验Andriod开发]之从零安装配置Android Studio并编写第一个Android App

    0. 所需的安装文件 笔者做了几年WP,近来对Android有点兴趣,尝试一下Android开发,废话不多说,直接进入主题,先安装开发环境,笔者的系统环境为windows8.1&x64. 安装 ...

  9. flume的使用

    1.flume的安装和配置 1.1 配置java_home,修改/opt/cdh/flume-1.5.0-cdh5.3.6/conf/flume-env.sh文件

  10. CAS单点登录和spring securtiy集成

    说明:本文章主要建立在spring-security早已集成在系统中的前提下: 1.需要创建一个spring-security.xml文件并关联在applicationContext.xml文件中:& ...