先看看json返回的数据结构:

我需要遍历取出bookreno   与  title  加载到页面容器中去

首先我要取到 recommendedBookList  字典结构数据,然后遍历反射到相应对象的属性

主方法这样写:

$(d.recommendedBookList).each(function(index,item){

//index指下标 
//item指代对应元素内容

//this指代每一个元素对象

var bookno= item.bookrecno;
var title = item.title;

        });

也可这样:

$.each(d.recommendedBookList, function (index, item) {
//index指下标
//item指代对应元素内容

//this指代每一个元素对象

var bookno= item.bookrecno;
var title = item.title;
});

具体代码如下:

                <div class="con_pic  picMarquee-left">
<div class="bd">
<ul class="picList"> </ul>
</div>
</div>
<script type="text/javascript">
//var a=1;
//var b=10;
$.ajax({
type: "get",
dataType: "json",
//data: "page="+a+"&rows="+b+"&return_fmt=" + encodeURIComponent("json"),
data: "page=1&rows=12&return_fmt=" + encodeURIComponent("json"),
url: "/interface/BookData.cshtml",
error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText);},
success: function (d) {
var bkinfo = "";
$.each(d.recommendedBookList, function (index, item) {
//index指下标
//item指代对应元素内容
//debugger
var bookno= item.bookrecno;
var title = item.title;
var bkurl = "http://202.121.31.35/webopac/book/" + bookno;
var bkimg = "http://202.121.31.35/webopac/bscover/" + bookno;
var bkli = "<li><div class='pic'><a href='" + bkurl + "' target='_blank' title='" + title + "'><img src='" + bkimg + "' /></a></div><p class='title'><a href='" + bkurl + "' target='_blank' title='" + title + "'>" +title.substr(,) + "</a></p></li>";
bkinfo += bkli;
}); $(".picList").html(bkinfo);
jQuery(".picMarquee-left").slide({ mainCell: ".bd ul", autoPlay: true, effect: "leftMarquee", vis: , interTime: });
}
});
</script>

ajax调用页面:

@using ChaoXingPMS.DBEntity;
@using System.Text; @{ var page = HttpContext.Current.Request["page"];
var rows = HttpContext.Current.Request["rows"];
var return_fmt = HttpContext.Current.Request["return_fmt"]; //string _posturl = "http://202.121.31.35/webopac/recommended?page=1&rows=10&return_fmt=json";
string _posturl = "http://202.121.31.35/webopac/recommended?page=" + page + "&rows=" + rows + "&return_fmt=" + return_fmt; //通过WebRequest对象获取返回值
WebClient client = new WebClient();
client.Headers["Accept"] = "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8";
client.Headers["Accept-Encoding"] = "gzip,deflate,sdch";
client.Headers["HOST"] = "opac.lib.shcc.edu.cn";
client.Headers["Accept-Language"] = "zh-CN,zh;q=0.8";
client.Headers["User-Agent"] = "Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.122 Safari/537.36";
client.Dispose();
string strLine = "", temp;
try
{
Stream stream = client.OpenRead(_posturl);
StreamReader sr = new StreamReader(stream);
while ((temp = sr.ReadLine()) != null)
{
strLine += temp;
}
stream.Close();
sr.Close();
}
catch (Exception e)
{
}
Response.Write(strLine);
}

另附参考博客:

http://www.cnblogs.com/lovenan/archive/2012/12/07/2807190.html

JS 循环遍历JSON数据

JSON数据如:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu 
e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}

用js可以写成: JSON数据如:{"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"valu
e\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}

用js可以写成:

view plaincopy to clipboardprint?
01.var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];   
02.      for(var o in data){   
03.        alert(o);   
04.        alert(data[o]);   
05.        alert("text:"+data[o].name+" value:"+data[o].age );   
06.      }  
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];
   for(var o in data){
    alert(o);
  alert(data[o]);
    alert("text:"+data[o].name+" value:"+data[o].age );
   }

或是

view plaincopy to clipboardprint?
01.<script type="text/javascript">   
02.function text(){   
03.  var json = {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"value\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}    
04.  json = eval(json.options)   
05.  for(var i=0; i<json.length; i++)   
06.  {   
07.     alert(json[i].text+" " + json[i].value)   
08.  }   
09.}   
10.</script>

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/songylwq/archive/2010/12/01/6047609.aspx

view plaincopy to clipboardprint? 
01.var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}];   
02.      for(var o in data){   
03.        alert(o);   
04.        alert(data[o]);   
05.        alert("text:"+data[o].name+" value:"+data[o].age );   
06.      }  
var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; 
  for(var o in data){ 
  alert(o); 
alert(data[o]); 
  alert("text:"+data[o].name+" value:"+data[o].age ); 
  }

或是

view plaincopy to clipboardprint? 
01.<script type="text/javascript">   
02.function text(){   
03.  var json = {"options":"[{\"text\":\"王家湾\",\"value\":\"9\"},{\"text\":\"李家湾\",\"value\":\"10\"},{\"text\":\"邵家湾\",\"value\":\"13\"}]"}    
04.  json = eval(json.options)   
05.  for(var i=0; i<json.length; i++)   
06.  {   
07.     alert(json[i].text+" " + json[i].value)   
08.  }   
09.}   
10.</script>

window.onload = function () {
        var jsJosn1 = '<%=Jsonstr%>';   //从后台获取json商品字符串
        var obj = eval('(' + jsJosn1 + ')');  //将字符串转为json对象
        obj = eval(obj.TableInfo);
        //循环商品
        for (var i = 0; i < obj.length; i++) {
            //alert(obj[i].BaseProductName + " " + obj[i].BaseProductNO + " " + obj[i].OrderPrice + " " + obj[i].OrderAmount + " " + obj[i].Unit + " " + obj[i].BPID);
            AddProduct(obj[i].BaseProductName, obj[i].BaseProductNO, obj[i].OrderPrice, obj[i].Unit, obj[i].OrderAmount, obj[i].BPID);
        }
    }

 
http://www.cnblogs.com/Fooo/p/3576367.html
 var obj = {"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]}{"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u6dfb\u52a0\u8bb0\u5f55"]},{"status":1,"bkmsg":"\u6210\u529f","bkdata":["\u5415\u5c1a\u5fd7","1387580400","\u4ec0\u4e48\u4e5f\u6ca1\u6709"]}
ajax请求:
$.ajax({
url: '/path/to/file',
type: 'GET',
dataType: 'json',
data: {param1: 'value1'},
success: function (obj){
//遍历obj
}
})

返回的内容在success的函数里面,所有的遍历操作都是在这里面操作的:

for循环:

var obj = {
"status":,
"bkmsg":"\u6210\u529f",
"bkdata":["\u5415\u5c1a\u5fd7","","\u6dfb\u52a0\u8bb0\u5f55"]
}
// console.log(obj.length);
if (obj.status == ) {
for (var i = ; i < obj.bkdata.length; i++) {
console.log(obj.bkdata[i]);
};
}else{
alert("数据有误~");
};

for in 循环:

//for in循环
for(x in obj.bkdata){
//x表示是下标,来指定变量,指定的变量可以是数组元素,也可以是对象的属性。
console.log(obj.bkdata[x]);
}

//元素 each方法

if (obj.status == ) {
$(obj.bkdata).each(function(index,item){
//index指下标
//item指代对应元素内容
//this指代每一个元素对象
//console.log(obj.bkdata[index]);
console.log(item);
//console.log($(this));
});
}else{
alert("数据有误~");
};

//jquery each方法

$.each( obj.bkdata, function(index,item){
console.log(item);
});

js遍历json数据的更多相关文章

  1. js声明json数据,打印json数据,遍历json数据

    1.js声明json数据: 2.打印json数据: 3.遍历json数据 //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿对象型) json['b'] = ...

  2. JS 循环遍历JSON数据 分类: JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{&quot;options&quot;:&quot;[{

    JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...

  3. js声明json数据,打印json数据,遍历json数据,转换json数据为数组

    1.js声明json数据: 2.打印json数据: 3.遍历json数据: 4.转换json数据为数组; //声明JSON var json = {}; json.a = 1; //第一种赋值方式(仿 ...

  4. JS解析json数据并将json字符串转化为数组的实现方法

    json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...

  5. JS解析json数据

    JS解析json数据(如何将json字符串转化为数组) 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...

  6. js中json数据简单处理(JSON.parse()和js中嵌套html)

    js中json数据简单处理(JSON.parse()和js中嵌套html) 一.总结 1.html中嵌套js:<script>js代码</script> 2.js中嵌套html ...

  7. for-in遍历json数据

    1.for遍历json数据 ','fun':'前端开发'} for(var attr in json){ alert(json[attr]) //遍历json属性的数据 alert(json['nam ...

  8. js读取json数据(php传值给js)

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  9. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

随机推荐

  1. JS对URL字符串进行编码/解码分析

    一.为什么要进行js编码和解码? 只有字母和数字[0-9a-zA-Z].一些特殊符号“$-_.+!*'(),”[不包括双引号].以及某些保留字,才可以不经过编码直接用于URL. 出现的情况: 网址路径 ...

  2. cordova Process finished with exit code -1

    安装完cordova之后,创建一个测试项目后,运行报Process finished with exit code -1,经过查找原因,是因为gradle没有安装,在http://www.androi ...

  3. 前端mock数据之mockjax和mockjson

    用处 在前后台共同进行一个项目的时候常会遇到一种情景, 后台定义好接口,前端按照接口进行开发, 当前端开发完成后台接口却还没有开发完成, 这个时候要进行接口测试, 只能等后台开发完成才能测试, 在这中 ...

  4. textarea文本简单样式编辑

    第一种方法采用替换:就是将文本域的换号符号\r\n,替换成其他符号,存入数据库,然后显示的时候再转换回来: //转换换行符$str=preg_replace("/\r\n|\r|\n/&qu ...

  5. opencv 3.0 DPM Cascade 检测 (附带TBB和openMP加速)

    opencv 3.0 DPM cascade contrib模块 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ ...

  6. 分享十个JavaScript在线调试工具

    测试Javascript可能是网页开发中最让人忧伤的工作.这里我找一些比较好的工具来帮助大家进行测试工作.这10款是我精选的基于浏览器的JavaScript在线调试工具,希望你们对你们有用. 1.Op ...

  7. 广搜+输出路径 POJ 3414 Pots

    POJ 3414 Pots Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13547   Accepted: 5718   ...

  8. HDU 1896 Stones --优先队列+搜索

    一直向前搜..做法有点像模拟.但是要用到出队入队,有点像搜索. 代码: #include <iostream> #include <cstdio> #include <c ...

  9. Volley(四)—— ImageLoader & NetworkImageView

    Volley(四)—— ImageLoader & NetworkImageView ImageLoader是一个加载网络图片的封装类,其内部还是由ImageRequest来实现的.但因为源码 ...

  10. Linux ncurses编写 FlapyBird 第一步

    /* * flapybird.h * * Created on: 2016年9月15日 * Author: jon */ #include <curses.h> #include < ...