jQuery遍历JSON对象集合的三种常见场景解析
本文通过三个实际案例详细解析了jQuery遍历JSON对象集合的方法。涵盖从AJAX获取数据、后端Java生成JSON到前端解析数组对象的完整流程,提供具体代码实现,帮助开发者掌握不同场景下的JSON数据处理技巧。
jQuery遍历JSON对象集合概述
本文通过具体案例分析,介绍了使用jQuery遍历JSON对象集合的三种常见情况,供读者参考。
案例一:常用遍历示例
第一个案例展示了jQuery遍历JSON对象集合的常用示例。
在JSP页面中,
$.ajax({
url: "${applicationScope.rootpath}common/getContractPage.html?userConId=${userConId}",
type: "post",
dataType:"json",
data: {},
success: function (jsonText) {
if(jsonText){
var status = jsonText.status;
var msg = jsonText.msg;
if(status == '500'){
//有异常的信息时
alert(msg);
}else{
$.each(jsonText,function(i,item){
var pngPath = item[0];
var pngName = item[1];
});
}
}
}
});
JSON文本的格式如下:
{"status":"200","msg":[{"id":"1","name":"n1"},{"id":"2","name":"n2"}]}
{"status":"500","msg":"异常信息"}
在Java后端代码中:
List pngFileList = new ArrayList();//某对象集合
if(null != pngFileList && pngFileList.size() > 0) {
JSONArray pngFileArray =JSONArray.fromObject(pngFileList);
}
if(null != pngFileArray){
this.setTextAjax(pngFileArray.toString());
//异常的格式
//this.setTextAjax("{\"status\":\"500\",\"msg\":\""+errormsg+"\"}");//没有记录
/**
* ajax返回html,包括json形式
*
* @param responseContent
*/
public void setTextAjax(String responseContent) {
try {
HttpServletResponse response = getHttpResponse();
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Content-Type", "text/html");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
PrintWriter out = response.getWriter();
out.print(responseContent);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
// ajaxResponse = new StringBufferInputStream(responseContent);
}
案例二:jQuery遍历JSON对象
第二个案例演示了如何使用jQuery遍历JSON对象。
直接展示相关代码:
<script src="js/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Link").click(function() {
var objson = "[{Title:'Sjr',Content:'Library',summary:'summary'},{Title:'Sjr',Content:'Library',summary:[{sum0:'sum0'},{sum0:'sum1'},{sum0:'sum2'}]},{Title:'Sjr',Content:'Library',summary:[{sum0:'sum0'},{sum0:'sum1'},{sum0:'sum2'}]}]";
var obj = eval(objson);
$(obj).each(function(index) {
var val = obj[index];
if (typeof (val.summary) == "object") {
$(val.summary).each(function(ind) {
alert(val.Title + " " + val.Content + " " + val.summary[ind].sum0);
});
} else {
alert(val.Title + " " + val.Content + " " + val.summary);
}
});
});
});
</script>
案例三:遍历读取JSON数组对象
第三个案例介绍在jQuery中遍历并读取JSON字符串中的对象。
假设从服务器端获取到包含数组的JSON字符串,我们需要了解如何遍历读取这些数据。
代码如下:{"result":null,"rows":[{"caishen":"东","fushen":"西北","huajiazi":"甲子","id":1,"nayin":"大海水","shengmen":"南","simen":"北","wugui":"西","xishen":"东南","yanggui":"西南","yingui":"东北"},{"caishen":"东北","fushen":"北","huajiazi":"乙丑","id":2,"nayin":"大林木","shengmen":"西北","simen":"西南","wugui":"东南","xishen":"东","yanggui":"西","yingui":"南"},{"caishen":"西","fushen":"东","huajiazi":"丙寅","id":3,"nayin":"石榴木","shengmen":"北","simen":"西北","wugui":"南","xishen":"东南","yanggui":"东北","yingui":"西南"}],"total":3}
使用.each方法难度较高,建议直接使用JavaScript读取。
//通过url获取json对象
$.post("json/godjson!godlist", function (data){
//data.rows返回的是json字符串。需要转换成json对象
var json = eval(data.rows)
//json变量现在就是一个数组对象,直接读取每个数组对象。结合属性进行输出
for(var i=0; i<json.length; i++){
alert(json[i].caishen+"--------- " + json[i].xishen);
}
//记得返回的数据类型一定要是json类型
}, "json");
通过上述方式,可以获取JSON字符串对应的JSON对象并进行输出。
分享以上案例旨在帮助大家掌握jQuery遍历JSON对象集合的方法,实现真正理解与应用,希望本文能对大家有所帮助。
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python?对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆:主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础:console.log语法与多参数用法
2026-11-04 09:23:11
