dojo1.1.0学习总结--简单登陆案例

来源：互联网发布：中信建投证券mac版编辑：程序博客网时间：2024/05/17 04:29

一. 登陆案例

先看一下整个代码：

前台页面部分：

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>登陆案例</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>
    </head>
    <body class="tundra">
        <br />
        <div id="showData"></div>
        USERNAME:
        <input type="text" id="username">
        <br />
        PASSWORD:
        <input type="password" id="password">
        <br />
        <button dojoType="dijit.form.Button">
            提交
            <script type="dojo/method" event="onClick">
                    dojo.xhrPost({
                        url:'./login.do',
                        load:loginCallBack,
                        error:loginError,
                        content:{
                            username:dojo.byId('username').value,
                            password:dojo.byId('password').value,
                            encoding: "utf-8",
                        }
                    });
                    function loginCallBack(data,parameters){
                        dojo.byId('showData').innerHTML = data;
                    }

                    function loginError(data,parameters){
                        dojo.byId('showData').innerHTML = '服务器错误';
                    }
                </script>
        </button>
    </body>
</html>

后台Action部分：

package org.sp.struts.action;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

/**
* 登录后台
* @author 无尽de华尔兹
*
*/
public class LoginAction extends Action {
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        response.getWriter().write(username + " " + password);

        return null;
    }
}

dojo 1.1.0 学习总结

一. 登陆案例

        1.导入CSS样式

        <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>

        2.添加dojo.js库
        <script type="text/javascript" djConfig="parseOnLoad: true"src="js/dojo-release-1.1.0/dojo/dojo.js"></script>

        3.导入组件
        <script type="text/javascript">
                dojo.require("dijit.form.Button");
        </script>

        4.页面元素可以通过脚本添加事件
        <button dojoType="dijit.form.Button">
                    提交
                    <script type="dojo/method" event="onClick">
                            dojo.xhrPost({
                                url:'./login.do',
                                load:loginCallBack,
                                error:loginError,
                                content:{
                                    username:dojo.byId('username').value,
                                    password:dojo.byId('password').value,
                                    encoding: "utf-8",
                                }
                            });
                            function loginCallBack(data,ioArgs){
                                dojo.byId('showData').innerHTML = data;
                            }

                            function loginError(data,ioArgs){
                                dojo.byId('showData').innerHTML = '服务器错误';
                            }
                        </script>
                </button>

                注：
                可以直接在元素标签中间添加脚本片断<script type="dojo/method" event="onClick"></script>
               Ajax功能可以通过dojo.xhrGet();和dojo.xhrPost();进行操作，其中的url为请求地址，load为回调函数，error为错误处理函数，content为请求参数。也可以通过 fromNode:表单ID名称的方式将表单提交。
                回调函数和错误处理函数的2个参数不能省略。但名字可以任意取。
                可以通过encoding: "utf-8",将参数设置成UTF-8编码。

            5.后台Action接收处理数据
                    request.setCharacterEncoding("utf-8");
                    response.setCharacterEncoding("utf-8");

                    String username = request.getParameter("username");
                    String password = request.getParameter("password");

                    response.getWriter().write(username + " " + password);

                注：后台程序应设置成UTF-8编码接受数据。