Dojo 学习笔记入门篇 First Dojo Example

Step 1： Configurate Dojo
从http://www.dojotoolkit.org/downloads 下载最新的Dojo包，并且放到你工程的某一个地方。比如，我就放把我的dojo库放在lib文件夹下（如图一）。
 
图一（文件目录结构）
在你的页面中加入如下代码，那么就完成了最基本的配置。
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false"></script>
Step 2: Start your First Example
我的第一个例子是模拟一个简单的登录页面，如果成功，则显示“Right！”，反之则显示“Wrong！Please try it again！”


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false"></script>
<style type="text/css"><!--
#container {
border: 1px dotted #b7b7b7;
background: #ededed;
width: 200px;
height: 200px;
}
--></style><style type="text/css" bogus="1"> #container {
border: 1px dotted #b7b7b7;
background: #ededed;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<form id="mainForm" action="controller/ajax-controller.php" method="post">
<label for = "name">Name:</label>
<input type="text" name="name"/>
<br/>
<label for = "password">Password:</label>
<input type="password" name="password" value=""/>
<br/>
<input type="submit" value="Submit"/>
<h1 id="resultText"></h1>
</form>
<script type="text/javascript"><!--
var formSubmit = function(e){
e.preventDefault();
var resultText = dojo.byId("resultText");
dojo.xhrPost({
url: "controller/controller.php",
form:"mainForm",
handleAs:"text",
handle:function(data,args){
console.info(data);
if(typeof data=="error"){
resultText.innerHTML = "<font color=\"red\">error!</font>";
}else{
if(data === "right"){
resultText.innerHTML = "Right!";
}else if(data==="wrong"){
resultText.innerHTML = "<font color=\"red\">Wrong!Please try it again!</font>";
}
}
}
});
};
dojo.addOnLoad(function(){
var theForm = dojo.byId("mainForm");
dojo.connect(theForm,"onsubmit","formSubmit");
});
// --></script>
</body>
</html>

（对于其中的Dojo方法，可以查看Dojo的API，在此不再赘述）
后台采用php，代码如下：


代码如下:

<?php
if($_POST["name"] == "blithe" && $_POST["password"]=="blithe"){
    print "right";
}else{
    print "wrong";
}
?>

赞 (0)

相关推荐

  • Dojo 学习笔记入门篇 First Dojo Example

    Dojo 学习笔记入门篇 First Dojo Example

    Step 1: Configurate Dojo 从http://www.dojotoolkit.org/downloads 下载最新的Dojo包,并且放到你工程的某一个地方.比如,我就放把我的dojo库放在lib文件夹下(如图一).  图一(文件目录结构) 在你的页面中加入如下代码,那么就完成了最基本的配置. <script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig ="

  • java 学习笔记(入门篇)_java的安装与配置

    java 学习笔记(入门篇)_java的安装与配置

    学习Java已经很长时间了,但是总感觉基础不是很好,有时候遇到一些平时不常见的问题就会无从下手,也从侧面显现了自己的一些问题.所以,打算写Java的随手笔记来巩固基础,加强学习.今天是第一篇,主要是java的安装,配置,也就是常说的Hello world. 一.下载 进入Oracle的官网,下载Java的jdk, 二.安装 安装就简单了,只需要下一步就可以,路径可以根据需要自己选择. 三.配置 安装完jdk后还不能来编译程序,因为还需要配置java 的jdk.进入的系统属性->高级->环境变量

  • java 学习笔记(入门篇)_java的基础语法

    java 学习笔记(入门篇)_java的基础语法

    前言 学习完了第一个java程序,之后就来系统的学习java.先从基础语法开始,这个语法你也可以理解为英语或是汉语里面的语法,只不过大家各有各的特点和区别.学习编程其实也是一个编程语言的学习过程.我们在学习英语的时候都说,要想学习好英语一定要动口说,那么在学习编程的时候你一定要动手写.编程无非就是一个写代码的过程,首要就是你心中要有基础,没有基础怎么去写呢,就像一篇好文章,没有好文笔是写不出来的.好文笔不仅靠积累,更要靠创造,编程亦是如此.java是一个面向对象的语言,在写代码的过程中,接触最多

  • 详解Vue学习笔记入门篇之组件的内容分发(slot)

    详解Vue学习笔记入门篇之组件的内容分发(slot)

    介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ message }} </child-component> mess

  • java 学习笔记(入门篇)_java程序helloWorld

    java 学习笔记(入门篇)_java程序helloWorld

    安装配置完Java的jdk,下面就开始写第一个java程序--hello World.用来在控制台输出"Hello World".首先,我们用最原始的方法,即用文本编辑器来写代码.在任意一个盘符下,以D盘根目录为例,在这个目录下建立一个txt文本,命名为HelloWorld,然后把后缀改为java,即HelloWorld.java. 然后打开编辑代码,如下: 复制代码 代码如下: public class HelloWorld { public static void main(Str

  • java 学习笔记(入门篇)_程序流程控制结构和方法

    程序流程控制结构和方法 程序流程控制结构分为:顺序.选择.循环以及异常处理结构.语句是程序的基本组成单位.在java中分简单语句和符合语句,简单语句就是一行代码,例如,privateint3=3;复合语句就是一些简单语句的组合了,例如一个方法等等.一般来说语句的执行流程是按顺序来进行的,但是当遇到一些特殊的条件,比如循环,这时候语句就会按照流程控制结构来进行了. (1)选择结构 选择结构用于根据不同的条件,实现不同的操作,它提供了一种机制,使得程序根据相应的条件运行对应的语句.java言语实现选

  • java 学习笔记(入门篇)_多选择结构switch语句

    多选择结构switch语句 在java中为多路分支选择流程专门提供了switch语句,switch语句根据一个表达式的值,选择运行多个操作中的一个.他的语法形式如下: 复制代码 代码如下: switch(表达式){ case 表达式常量1:语句1: break: case 表达式常量2:语句2: break: ...... case 表达式常量n:语句n: break: [default:语句n+1:] } 其中,一个case表达式常量成为标号,代表一个case分支的入口.switch语句在运行

  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析

    这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法.它只是一个接收参数的函数. 在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文). 一个 函数化组件 就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的

  • Vue学习笔记进阶篇之vue-router安装及使用方法

    Vue学习笔记进阶篇之vue-router安装及使用方法

    介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

  • 推荐dojo学习笔记

    在引用dojo.js前,最好声明djConfig对象,以便在加载dojo.js时能够取得所设置的值,虽然在0.3版本以后dojo支持在加载后设置,但是强烈建议你把声明djConfig的代码作为第一段script: 一个完整的djConfig对象定义如下(值均为dojo的默认值) js 代码 var djConfig = {        isDebug: false,        debugContainerId: "",        bindEncoding: "&qu

随机推荐