dojo1.1.0学习总结--JSON数据对象案例

前端之家收集整理的这篇文章主要介绍了dojo1.1.0学习总结--JSON数据对象案例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JSON数据对象案例</title> <!-- 导入样式 --> <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"; @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"; </style> <!-- 导入dojo库 --> <script type="text/javascript" djConfig="parSEOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> <!-- 导入按钮组件 --> <script type="text/javascript"> dojo.require("dijit.form.Button"); </script> <!-- 编写Ajax获取json脚本 --> <script type="text/javascript"> function getText() { dojo.xhrGet({ //url: "./json.do",url:"data.jsp",load: function(data,ioArgs){ //json文本缓冲对象 var textBuffer = []; //遍历json数据 for(var i = 0; i < data.length; i++){ textBuffer.push("Name:"+data[i].name+",Age:"+data[i].age); } dojo.byId("toBeReplaced").innerHTML = textBuffer.join("<br/>"); },error: function(response,ioArgs){ dojo.byId("toBeReplaced").innerHTML = "错误"; },//处理json类型 handleAs: "json" }); } </script> </head> <body class="tundra"> <div dojoType="dijit.form.Button" onclick="getText();"> Show Results </div> <br /> <div id="toBeReplaced"></div> </body> </html> 后台通过JSP页面传输JSON数据 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String data = "[{name:'Gary',age:'24'},{name:'Shane',age:'29'},{name:'Kay',age:'54'},{name:'Sarah',age:'30'},{name:'Jerry',age:'56'}]"; response.getWriter().write(data); %> dojo 1.1.0 学习总结 五. JSON数据对象案例 1.导入样式,库和组件 <!-- 导入样式 --> <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"; @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"; </style> <!-- 导入dojo库 --> <script type="text/javascript" djConfig="parSEOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> <!-- 导入按钮组件 --> <script type="text/javascript"> dojo.require("dijit.form.Button"); </script> 2.编写Ajax获取json脚本 <!-- 编写Ajax获取json脚本 --> <script type="text/javascript"> function getText() { dojo.xhrGet({ url: "data.jsp",//处理json类型 handleAs: "json" }); } </script> 注: 1. //json文本缓冲对象 var textBuffer = []; //遍历json数据 for(var i = 0; i < data.length; i++){ textBuffer.push("Name:"+data[i].name+",Age:"+data[i].age); } 通过回调函数获取后台传递的JSON数据,使用遍历循环解析接收的数据。并将其保存在textBuffer对象中。 2. handleAs: "json" 必须指定处理类型,不然无法解析JSON数据 3.显示层和调用Ajax的按钮 <div dojoType="dijit.form.Button" onclick="getText();"> Show Results </div> <br /> <div id="toBeReplaced"></div> 4.后台通过JSP页面直接输出JSON格式数据到response中 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String data = "[{name:'Gary',age:'56'}]"; response.getWriter().write(data); %> 注:也可以通过Servlet或Struts的Action将JSON格式数据写入response中 原文链接:https://www.f2er.com/dojo/291884.html

猜你在找的Dojo相关文章