<%@ 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="par
SEOnLoad: 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="par
SEOnLoad: 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中
