ajax数据返回进行遍历的实例讲解

 更新时间:2018年08月08日 14:52:21   作者:OliverWeb  
今天小编就为大家分享一篇ajax数据返回进行遍历的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

后台返回的数据:

{"receiveList":[{"receive_dept_id":"1007873","receive_dept_desc":"区公司领导","guid":"2016112316042622494230","receive_platform_id":"001"},{"receive_dept_id":"1007876","receive_dept_desc":"主任","guid":"2016112316042626240391","receive_platform_id":"001"}]}

其实仔细分析返回的格式,很简单,就是一个Map,里面放了一个List,List里面有各种参数。

前端页面的请求

$.ajax({

url:"/moduleAuthen/default.do?method=loadAllReceive",

dataType:"json", //返回的数据是json 格式

data:$("#fom1").serialize, //提交id为form1的所有参数

success:function(data){

var json =data.receiveList;

//第一种方式的遍历

 for(var index in json){

 //其实index 就是个索引

 var guid =json[index].guid;

 var receive_dept_desc =json[index].receive_dept_desc;

}

//还有一种jquery 方式的遍历,效果其实是一样的,拿到后台返回我们的数据,我们就可以进行各种操作了。

$.each(json,index){

 var guid =json[index].guid;

 var receive_dept_desc =json[index].receive_dept_desc;

}

}

})

{ "compress":[
<#if d_live??>
<#-- 参数:int pageNo -->
<#assign page = request.getParameter("page")!"null">
<#assign page = request.getParameter("page")!"null">
<#if page!="null" && page!="">
<#assign page = page?number>
<#else>
<#assign page=1>
</#if>
<#-- 参数:int pageSize-->
<#assign pagesize = request.getParameter("pagesize")!"null">
<#if pagesize!="null" && pagesize!="">
<#assign pagesize = pagesize?number>
<#else>
<#assign pagesize=10>
</#if>
<#if d_live.getLiveInfoList( page,pagesize,"3")??>
<#assign pagedContent = d_live.getLiveInfoList( page,pagesize,"3")!"null">
<#if pagedContent.getContent()??>
<#assign LiveInfo = pagedContent.getContent()!"null"> <#-- LiveInfo数据源 -->
<#if LiveInfo??>       
<#list LiveInfo as liveInfo>    
     <#assign liveId = liveInfo.getLiveId()!"null">
     <#assign liveInfoUrl = d_live.getLiveInfo("${liveId}")!"null">
     <#assign liveUrl = liveInfoUrl.getPlayUrl()!"null"> <#-- 直播链接地址 -->
      {"liveId":"${liveId}","liveUrl":"${liveUrl}"}
<#if liveInfo_has_next>
,
</#if>
</#list> 
</#if>
</#if>
</#if>
 </#if>
 ]
}


/*异步数据*/
var liveId= $("#liveId").val();
var asyurl="http://wap.cmread.com/rbc/t/liveindex.jsp?vt=9"+"&ol=560395";
alert("异步请求之前");
setTimeout(function(){
 alert("进入定时器,还没有异步");
$.ajax({
url:asyurl,
type:"POST",
dataType:"json",
success: function(data){
  alert("异步获取数据成功");
 //var data = eval('('+data+')');
 compress = data.compress; 
  for(var i=0;i<compress.length;i++){
  alert("进入for循环");
  var asyliveId=compress[i].liveId;
  if(asyliveId==liveId){
   alert("匹配相同");
  var liveUrl=compress[i].liveUrl;
  $("#live").find("source").attr("src",liveUrl);
  }
  }
  alert("执行第一次支部请求,改变地址是"+$("#live").find("source").attr("src")); 


 },error:function(){
 console.log("error");
 }
});

},3000);

以上这篇ajax数据返回进行遍历的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • [ASP.NET AJAX]Function对象及Type类的方法介绍

    [ASP.NET AJAX]Function对象及Type类的方法介绍

    [ASP.NET AJAX]Function对象及Type类的方法介绍...
    2007-01-01
  • 简单谈谈AJAX核心对象

    简单谈谈AJAX核心对象

    核心对象是XMLHttpRequest,它可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。
    2015-11-11
  • js实现简单实用的AJAX完整实例

    js实现简单实用的AJAX完整实例

    这篇文章主要介绍了js实现简单实用的AJAX的方法,以完整实例形式分析了ajax无刷新调用的具体实现步骤与相关技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2016-02-02
  • AJAX工作原理及优缺点详解

    AJAX工作原理及优缺点详解

    AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。接下来通过本文给大家讲解ajax的工作原理及优缺点,感兴趣的朋友一起看看吧
    2016-11-11
  • 全面解析Ajax和jsonp使用总结

    全面解析Ajax和jsonp使用总结

    这篇文章主要介绍了全面解析Ajax和jsonp使用总结 的相关资料,需要的朋友可以参考下
    2017-10-10
  • 菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    菜鸟蔡之Ajax复习第二篇(JQuery中的load()方法实现Ajax功能)

    在上一篇博客中写到的是在传统的Javascript中使用XMLHttpRequest对象异步加载数据的,唉,童鞋.......看到那些代码是不是有点头疼啊!呵呵......
    2012-11-11
  • Ajax动态为下拉列表添加数据的实现方法

    Ajax动态为下拉列表添加数据的实现方法

    这篇文章主要介绍了Ajax动态为下拉列表添加数据的实现方法,需要的朋友可以参考下
    2017-01-01
  • 浅析Ajax后台success传来json数据的问题

    浅析Ajax后台success传来json数据的问题

    最近在使用JQuery的ajax方法时,需要返回的数据为json数据,在success返回中数据处理会根据返回方式不同会采用不同的方式来生成json数据。下面小编给大家介绍下在$.ajax方法中应该是如何来处理的
    2016-10-10
  • ajax跨域访问报错501的解决方法

    ajax跨域访问报错501的解决方法

    这篇文章主要为大家详细介绍了ajax跨域访问报错501的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • AJax与Jsonp跨域访问问题小结

    AJax与Jsonp跨域访问问题小结

    本文给大家汇总介绍了JavaScript的AJax,JQuery的AJax以及利用jsonp实现跨域访问的问题,非常的细致全面,有需要的小伙伴可以参考下。
    2015-12-12

最新评论