dojo1.1.0学习总结--JSON数据对象案例
2008-10-17 12:56
656 查看
<%@ 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",
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>
注：
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:'24'},{name:'Shane',
age:'29'},{name:'Kay', age:'54'},{name:'Sarah',
age:'30'},{name:'Jerry', age:'56'}]";
response.getWriter().write(data);
%>
注：也可以通过Servlet或Struts的Action将JSON格式数据写入response中
<!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",
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>
注：
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:'24'},{name:'Shane',
age:'29'},{name:'Kay', age:'54'},{name:'Sarah',
age:'30'},{name:'Jerry', age:'56'}]";
response.getWriter().write(data);
%>
注：也可以通过Servlet或Struts的Action将JSON格式数据写入response中
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- dojo1.1.0学习总结--Gird绑定JSON数据案例
- dojo1.1.0学习总结--简单登陆案例
- dojo1.1.0学习总结--注册案例
- dojo1.1.0学习总结--简单对话框登陆案例
- dojo1.1.0学习总结--在线编辑器案例
- dojo1.1.0学习总结--简单表格案例
- java 后台封装json数据学习总结（二）
- 学习笔记：DataTables之数据读取和操作（java对象转换为json对象）
- JavaScript学习总结（六）数据类型和JSON格式
- dojo小例子（12）form转换成带内部对象的json数据
- struts2 Action 返回值总结+案例分析 (jsp/html, 字符串,json数据)
- JSON解析类库之Fastjson（1） --- Fastjson类库学习, 生成与解析json数据，json字符串与Java对象互转
- javascript学习-创建json对象数据，遍历
- Yii学习总结之数据访问对象 (DAO)
- 关于ASP.NET下，JQuery+AJAX使用JSON返回对象集合List数据的总结
- JSON解析类库之Jackson（1） --- Jackson类库学习, 生成与解析json数据，json字符串与Java对象互转
- JavaScript学习总结（六）数据类型和JSON格式
- json数据格式学习总结
- Yii学习总结之数据访问对象 (DAO)
- JSON解析类库之JSON-lib --- JSON-lib类库学习, 生成与解析json数据, json字符串与Java对象互转