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

发布时间：2020-12-16 21:52:21 所属栏目：百科来源：网络整理

导读：%@ page language="java" pageEncoding="UTF-8"% !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head titleJSON数据对象案例/title !-- 导入样式 -- style type="text/css" @import "js/dojo-release-1.1.0/dojo/resources/dojo.css";

<%@ 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>  <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>  <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>  <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脚本  <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中

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!