`

ajax json的遍历,长度等

    博客分类:
  • JS
阅读更多
//json对象
一、$.each遍历json对象
查看一个简单的jQuery的例子来遍历一个JavaScript数组对象。
var json = [  
    {"id":"1","tagName":"apple"},  
    {"id":"2","tagName":"orange"},  
    {"id":"3","tagName":"banana"},  
    {"id":"4","tagName":"watermelon"},  
    {"id":"5","tagName":"pineapple"}  
];  
   
$.each(json, function(i, obj) {  
    alert(obj.tagName);  
});
上面的代码片断工作正常,提示 “apple”, “orange” … 等,如预期一样。  

//json字符串
问题1: JSON 字符串。
下面的例子中,声明了一个JSON字符串(随附单或双引号)直接地。
var json = '[  
    {"id":"1","tagName":"apple"},  
    {"id":"2","tagName":"orange"},  
    {"id":"3","tagName":"banana"},  
    {"id":"4","tagName":"watermelon"},  
    {"id":"5","tagName":"pineapple"}  
    ]';  
   
$.each(json, function(i, obj) {  
    alert(obj.tagName);  
});
在Chrome中,它显示在控制台下面的错误:
Uncaught SyntaxError: Unexpected token ILLEGAL
解决方案:JSON字符串转换为JavaScript对象。
要修复它,通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。
var json = '[  
    {"id":"1","tagName":"apple"},  
    {"id":"2","tagName":"orange"},  
    {"id":"3","tagName":"banana"},  
    {"id":"4","tagName":"watermelon"},  
    {"id":"5","tagName":"pineapple"}  
    ]';  
   
$.each(JSON.parse(json), function(i, obj) {  
    alert(obj.tagName);  
});  
   
//or   
   
$.each($.parseJSON(json), function(i, obj) {  
    alert(obj.tagName);  
});  


二、json数组有长度json.arrayname.length,如果单纯是json格式,那么不能直接使用json.length方式获取长度,而应该使用其他方法。(注:arrayname为数组名)
例1:
现在有json1数据如下:
var json1={  
    "abc":[  
        {"name":"txt1"},  
        {"name":"txt2"}  
    ]  
};
以上遍历的方法是: 
for(var i=0;i<json1.abc.length;i++){   

    alert(json1.abc[i].name);   

}
这里的json1.abc是一个数组,数组是由2个子json组成的,数组是有length属性的,而普通的json是没有该属性的。   


现在有json2数据如下:
var json2={"name":"txt1","name2":"txt2"};
json本身没有length属性,所以用length属性自然会出错。 
for(var i=0;i<json2.length;i++){  
  
    alert(json2[i].text);  
  
}//以上脚本执行时,将会出错。   

那么要遍历这样的json怎么办呢?
我们可以这么做:
for(var js2 in json2){  //使用 for-in 来循环对象的属性
  
    alert( js2 + "=" + json2[js2]);  
  
}
//获得长度
var jslength=0;  
  
for(var js2 in json2){  
  
    jslength++;  
  
}
//把这段代码写成一个方法,以后调用就行了: 
function getJsonLength(jsonData){  
  
    var jsonLength = 0;  
  
    for(var item in jsonData){  
  
        jsonLength++;  
  
    }  
  
    return jsonLength;  
  
}  
分享到:
评论

相关推荐

    J2EE中JSON+Jquery_AJAX应用.pdf

    - 如果数据量大且复杂,可能需要递归或循环遍历 JSON 结构,以适配页面的显示需求。 6. **错误处理与安全性** - AJAX 请求中,应当包含错误处理机制,比如对网络异常、服务器错误等情况进行捕获和反馈。 - 安全...

    jquery解析JSON数据的方法.docx

    2. 使用`eval()`、`.getJSON()`、`.ajax()`或`.get()`(设置`dataType: 'json'`)等方法将JSON字符串转化为JavaScript对象。 3. 访问转化后的JavaScript对象,遍历并使用数据。 注意,尽量避免使用`eval()`,因为它...

    jquery-autoComplete 处理返回的json对象问题

    在`success`回调中,我们使用`$.map`遍历JSON数组,将每个对象转化为`{label, value}`的形式,然后将结果传递给`response`函数,这样autoComplete就能正确显示建议列表了。 此外,还需要注意以下几点: 1. 确保...

    jquery教程ajax请求json数据示例

    它通过减少 JavaScript 编程的工作量,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在前端开发中,jQuery 的使用非常广泛,尤其是在处理 Ajax 请求时。Ajax(异步JavaScript和XML)是一种在无需重新加载整个...

    jQuery ajax搜索框自动补全代码

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨“jQuery ajax搜索框自动补全代码”这一主题,包括其工作原理、实现方法和相关知识点。 首先...

    Ajax无刷新显示数据

    利用Servlet去完成组装的JSON数据,然后直接访问页面,通过url去访问servlet的方法,然后JSON数据会在success的(data)参数显示,然后通过foreach或者是的长度方法进行取值遍历。

    ajax自动补全

    jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互等任务。由于其简单易用的API,jQuery在Web开发中被广泛应用。在实现Ajax自动补全时,jQuery可以极大地简化我们的代码。 ...

    ajax课件2(培训用的)

    虽然名字中有XML,但其实这个对象并不强制要求使用XML作为数据格式,它可以处理JSON、文本等多种格式的数据。通过XMLHttpRequest,客户端可以发起HTTP请求,并接收服务器的响应。 **发送XML格式的请求** 发送XML...

    jquery ajax 实例

    - **jQuery**:是一款流行的JavaScript库,简化HTML文档遍历、事件处理、动画等操作,支持链式编程和Ajax交互。 - **AJAX**(Asynchronous JavaScript and XML):一种在无需重新加载整个网页的情况下能够更新部分...

    Ajax3_在请求和响应中使用XML

    尽管其名称中包含“XML”,但实际上,这个对象并不局限于XML格式,而是可以处理任何形式的数据,包括JSON、文本等。 **发送XML格式的请求** 使用XMLHttpRequest对象发送XML数据时,首先要将数据格式化为XML结构。...

    jQuery JSON的解析方式分享

    之后,我们就可以使用$.each()函数遍历该JSON对象中的root数组,获取每个元素并进行操作,如计算数组长度并弹出每个元素的name和value。 然而,使用eval()函数存在安全风险。eval()函数将执行字符串中的任何代码,...

    ajax+jQuery实现级联显示地址的方法

    5. 为了避免页面中有过多的下拉列表,如果某一级的下拉列表中没有数据(即返回的JSON数据长度为0),则会删除这个下拉列表。 6. show()函数中,当一个下拉列表变化时,会获取该下拉列表当前选中的值,然后使用这个...

    Java web随手记,持续更新

    总结来说,Java Web开发中数据的传输涉及表单提交、JSON序列化、异步请求和回调处理等多个步骤。理解这些概念和技术对于构建动态、交互性强的Web应用至关重要。同时,注意处理字符编码问题,以确保数据的完整性和...

    json 入门学习笔记 示例代码

    注意,`for...in`循环用于遍历对象,而`length`属性用于获取数组的长度。 4. **HTML动态更新**: 使用jQuery的`$(selector).html(content)`方法,可以更新选中元素的HTML内容。在本例中,`$(“#body”).html(row)`...

    ASP.NET项目知识点整理与项目总结

    JQuery简化了HTML文档遍历和事件处理、动画、Ajax交互的编程工作,提高了开发效率。同时,JQuery的使用使跨浏览器的兼容性问题得到了很好的解决。 Bootstrap作为前端框架被引入项目,它提供了一套响应式的、移动...

    jquery插件实现的asp.net自动完成控件

    jQuery插件可能还包括一些自定义选项,如延迟时间、最小输入长度等。这些可以通过`options`参数传递到插件中,然后根据需求调整行为。 压缩包中的文件可能包含了项目的解决方案文件(jquery.sln)、测试文件夹...

    概述jQuery中的ajax方法

    jQuery的Ajax方法不仅简化了原生Ajax的使用,还提供了一些默认设置,例如自动处理JSON数据和文本数据,以及内容类型JSON的转换等。这使得开发者可以更加高效地处理页面中的异步交互,而不需要花费大量时间来处理底层...

    jQuery中的$.ajax()方法应用

    jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等多种操作。其中,Ajax是“Asynchronous JavaScript and XML”的缩写,代表了一种利用JavaScript实现的无需重新加载整个页面即可...

    纯jQuery的自动完成

    jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的简洁API使得开发者能够快速地实现复杂的页面交互,而无需深入理解底层的JavaScript细节。 二、自动完成的...

Global site tag (gtag.js) - Google Analytics