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

来源：互联网发布：数据库管理员制度规定编辑：程序博客网时间：2024/05/21 10:23

<%@ 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",
                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中